...

View Full Version : text box in photo slider II



fingertips
12-21-2006, 06:45 PM
I need help with the code for photo slider II to allow for more then one line for text under the photo. Can anyone provide the changes I need to make to allow this to happen. The simple \n does not work. This only adds a space between the text. Thanks

Mr J
12-22-2006, 06:47 PM
In order to get any help you need to post some code or a url

Do not assume that people will know the script you are talking about

fingertips
12-28-2006, 02:02 AM
Sorry about that here it is

<script language="JavaScript1.1">

/*
Photo Slider II- By Kevin Adams (kadams70@hotmail.com)
For this script and more
Visit http://www.javascriptkit.com
*/

var photos=new Array()
var text=new Array()
var which=0
var what=0

//Change the below variables to reference your own images. You may have as many images in the slider as you wish
photos[0]="galleries/landscape_and_animals/A Bog in Sandwich, NH.jpg"
photos[1]="galleries/landscape_and_animals/Blue Grass.jpg"
photos[2]="galleries/landscape_and_animals/Cat at Dusk.jpg"
photos[3]="galleries/landscape_and_animals/Chicken.jpg"
photos[4]="galleries/landscape_and_animals/Granby Bog.jpg"
photos[5]="galleries/landscape_and_animals/Ocean Wave.jpg"
photos[6]="galleries/landscape_and_animals/R.I. Beach.jpg"
photos[7]="galleries/landscape_and_animals/Seagull.jpg"
photos[8]="galleries/landscape_and_animals/Spider Web.jpg"
photos[9]="galleries/landscape_and_animals/Stream at Mcleans Conservation, Granby, CT.jpg"
photos[10]="galleries/landscape_and_animals/Sunset with Ocean Grass, R.I..jpg"
photos[11]="galleries/landscape_and_animals/Tide Pool.jpg"
photos[12]="galleries/landscape_and_animals/White Heron.jpg"

//change coresponding description
text[0]="Amaryllis"
text[1]="Cacrus Flower!"
text[2]="Cactus Flower"
text[3]="Cymbidium Orchid."
text[4]="Daffadil!"
text[5]="Easter Lilly"
text[6]="Iris B."


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}

function type()
{
alert("This textbox will only display default comments")
}


</script>
<p><input type=text name="description" style="width:400px" size=50>

<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;what=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>

Mr J
12-28-2006, 02:04 PM
You will have to use a div instead of a text box


<script type="text/javascript">

/*
Photo Slider II- By Kevin Adams (kadams70@hotmail.com)
For this script and more
Visit http://www.javascriptkit.com
*/

var photos=new Array()
var text=new Array()
var which=0
var what=0

//Change the below variables to reference your own images. You may have as many images in the slider as you wish
photos[0]="galleries/landscape_and_animals/A Bog in Sandwich, NH.jpg"
photos[1]="galleries/landscape_and_animals/Blue Grass.jpg"
photos[2]="galleries/landscape_and_animals/Cat at Dusk.jpg"
photos[3]="galleries/landscape_and_animals/Chicken.jpg"
photos[4]="galleries/landscape_and_animals/Granby Bog.jpg"
photos[5]="galleries/landscape_and_animals/Ocean Wave.jpg"
photos[6]="galleries/landscape_and_animals/R.I. Beach.jpg"
photos[7]="galleries/landscape_and_animals/Seagull.jpg"
photos[8]="galleries/landscape_and_animals/Spider Web.jpg"
photos[9]="galleries/landscape_and_animals/Stream at Mcleans Conservation, Granby, CT.jpg"
photos[10]="galleries/landscape_and_animals/Sunset with Ocean Grass, R.I..jpg"
photos[11]="galleries/landscape_and_animals/Tide Pool.jpg"
photos[12]="galleries/landscape_and_animals/White Heron.jpg"

//change coresponding description
text[0]="Amaryllis"
text[1]="Cacrus Flower!<br>other text"
text[2]="Cactus Flower<br>Some other text"
text[3]="Cymbidium Orchid."
text[4]="Daffadil!"
text[5]="Easter Lilly"
text[6]="Iris B."


function backward(){
if(which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.getElementById("description").innerHTML=text[what];
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.getElementById("description").innerHTML=text[what];
}
else window.status='End of gallery'
}

function type()
{
alert("This textbox will only display default comments")
}


</script>


<img name="photoslider" src="galleries/landscape_and_animals/A Bog in Sandwich, NH.jpg">
<div id="description" style="width:400px">Amaryllis</div>

<p>
<input type="button" value="<<Back" name="B2" onClick="backward()">
<input type="button" value="Next>>" name="B1" onClick="forward()"><br>
<a href="#" onClick="which=1;what=1;backward();return false"><small>Start Over</small></a>
</p>


Here's another example for you to look at

www.huntingground.freeserve.co.uk/imagery/img_gal2.htm

fingertips
12-29-2006, 01:29 PM
Mr J excellent link to the image gallery 2. After hours of working with it i cannot get the slideshow to play properly. Depending on where I move the image holder it either play or starts then stops. Can you take a look.

http://www.ngartsite.com/ngartsite/oil_paintings_test3.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum