PDA

View Full Version : Captions not showing on Full Page Slideshow



Belniak
03-02-2015, 01:27 PM
My captions are not showing on my Full Page Slideshow. I am using the code from this URL: http://www.dynamicdrive.com/dynamicindex14/fullpageslideshow/index.htm. The actual slideshow does work. I have downloaded the 4 files in step 2 of the directions to my server. The pictures are fading in and out and the slideshow is stopping after 2 loops. The call to get the captions is not working correctly. Nor is the caption in the static_text_area showing during the slideshow. I am on IE8. How can I get the captions to show during the slide show. My code is below. I have tried using the playlist.json version and the playlist version is what I have below. Neither will show the captions. Thanks in advance for your help.


<head>

<link rel="stylesheet" type="text/css" href="smooth_slider.css">

<style>

.slideshowwrapper{ /* dimensions of outermost slideshow container */
width: 900px;
height: 500px;
position: relative;
overflow: hidden;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://uhc004.uhc.com/sites/UOMD/SiteDirectory/VEPSDelivery/Belniak/Test/Shared%20Documents/jquery-slider.js">

/***********************************************
* Full Page Slideshow- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script>
$(function() {
$('#resume').on('click', function(){ // set up resume button behavior
$("#pan_area").smoothslider("resume") // resume playing of this slideshow. Pass in "pause" to pause it instead
$(this).hide() // hide resume button
})


$("#pan_area").smoothslider("install", {
"playlist":[
{"url":"http://uhc004.uhc.com/sites/UOMD/SiteDirectory/VEPSDelivery/Belniak/Test/Shared%20Documents/img0.jpg",
"caption":"Zoom 1n",
"slide":{"z1":1, "z2":1.5}}, // zoom in (magnification from 1 to 1.5)

{"url":"http://uhc004.uhc.com/sites/UOMD/SiteDirectory/VEPSDelivery/Belniak/Test/Shared%20Documents/img1.jpg",
"caption":"Zoom Out",
"slide":{"z1":2, "z2":1}}, // zoom out

{"url":"http://uhc004.uhc.com/sites/UOMD/SiteDirectory/VEPSDelivery/Belniak/Test/Shared%20Documents/img2.jpg",
"caption":"Pan up",
"slide":{"y1":0, "y2":200}}, // pan up

{"url":"http://uhc004.uhc.com/sites/UOMD/SiteDirectory/VEPSDelivery/Belniak/Test/Shared%20Documents/img3.jpg",
"caption": "Pan left",
"slide":{"x1":0, "x2":20, "z1":1}}, // pan left

{"url":"http://uhc004.uhc.com/sites/UOMD/SiteDirectory/VEPSDelivery/Belniak/Test/Shared%20Documents/img4.jpg", "caption":"No Slide Animation","slide":{}} // no slide
],// get the playlist and some config from the server

// this function gets called whenever there's an image change

"on_image_change":function(caption,image_url) {
// we could use fade_swap instead of the following (see text.html)
var area= $("#img_msg_area").find("span");
area.animate({"opacity": 0}, 500, "swing", function() {
area.text(caption);
area.animate({"opacity": 1}, 500); // fade in & out take 500ms each
});
},
loops: 2, // number of loops before stopping. Remove thisoption to run continuously
"throbber":$("#throbber"), // an image to show when waiting for images to load
on_pause:function(){
$('#resume').show()
}

});
});

</script>

</head>

<body>

<div class="slideshowwrapper" >
<div id="throbber"><img src="img/throbber.gif"></div>
<div id="resume" style="display:none">Replay</div>
<div id="pan_area"></div>
<div id="img_msg_area"><span></span></div>
<div id="static_text_area">There is nothing more amazing than nature, the miracle that is every creature in her domain. The birds, the lions, down to every insect, together they form the circle of life that support one another.</div>

</body>

Beverleyh
03-02-2015, 01:55 PM
Please note the list of supported browsers on the demo page
supported browsers: IE9+, all modern versions of FF, Chrome and Safari, and mondern Android and iPhone devicesUnfortunately, IE8 is not supported.