Well, it basically comes down to modifying the last example on the supplementary page so the description is shown within the nav panel itself. The only modification you really need to make is to add an additional "text container" DIV inside the nav panel within simplegallery.js. Do the following:
1) Use the attached modified .js file.
2) Then, inside your invocation code on your page, define an array of text descriptions, and use the onslide() event handler to display them inside the nav panel's text container:
Code:
<script type="text/javascript">
var vacationtext=[
"The river looks beautiful at sunset.",
"A nice day to enjoy the city.",
"That's a lot of cheese I must say.",
"Most buildings in the city are just 4 or 5 stories tall."
]
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new"],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", ""],
["http://i30.tinypic.com/531q3n.jpg", "", ""],
["http://i31.tinypic.com/119w28m.jpg", "", ""]
],
autoplay: true,
persist: false,
pause: 2500, //pause between slides (milliseconds)
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
$('#gallerytext').html(vacationtext[i])
}
})
</script>
Bookmarks