Results 1 to 2 of 2

Thread: How do I add captions and embed this slideshow on a page?

  1. #1
    Join Date
    Oct 2010
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question How do I add captions and embed this slideshow on a page?

    1) Script Title: Cut & Paste Full Screen Image Slideshow (w/ auto read images from directory)

    2) Script URL (on DD): http://www.javascriptkit.com/script/...ow/index.shtml

    3) Describe problem: I love this script. But does anyone know the proper coding to:

    1. Allow captions to easily be added to each image from the directory?

    2. Embed the slideshow on a page instead of it being on its own new page?

    Thanks for any insight!

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,879
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    The javascriptkit-code is not very much customizable. Try to experiment with the code below (no jquery, pure vanilla). I have arrows instead of thumbnails. Arrows are much more flexible. As for embedding the show on a page, just use an iframe.
    Code:
    <!doctype html>
    <html lang="en" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Slideshow</title>
    
    <style>
    .slide{	
    opacity: 0;
    z-index: 1;
    position: absolute; width: calc(100% - 0px); height: 100%; left: 0px; top: 0;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
    box-sizing: border-box;
    text-align: center;
    background-repeat: no-repeat; 
    }
    .showing{
    opacity: 1;
    z-index: 2;
    }
    html, body {overflow: hidden; background: black}
    </style>
    
    <style>
    .buttons {
    position: relative; display: inline-block; top: 0; cursor: pointer; line-height: 0; border: 2px solid white; border-radius: 100%; padding: 2px; background: black
    }
    #pause, #play, #next {margin-left: 20px}
    #play {display: none}
    #pause, #play, #next, #prev {transition: 2s}
    </style>
    
    <style>
    
    html { -webkit-animation:fadein 6s; animation:fadein 6s }
    @-webkit-keyframes fadein
    {
       0%{opacity:0; } 
       25%{opacity:0; }
       35%{opacity:0; } 
       50%{opacity:1; }
       75%{opacity:1; }
       100%{opacity:1; }
     }
    
    @keyframes fadein
    {
       0%{opacity:0; } 
       25%{opacity:0; }
       35%{opacity:0; } 
       50%{opacity:1; }
       75%{opacity:1; }
       100%{opacity:1; }
     }
    
    </style>
    
    </head>
    
    <body>
    
    <div style="position: absolute; left: 0; top: 0;   background: transparent; width: 100%; text-align: center; z-index: 3" >
    <div id="prev" class="buttons" onclick="prevSlide(); "><img src="https://www.wierdenland.nl/img_25jaar/prev_slideshow.png" style="height: 30px; width: 30px; " alt=""></div>
    <div id="pause" class="buttons"  onclick="pauseSlideshow()"><img src="https://www.wierdenland.nl/img_25jaar/pause_slideshow.png" style="height: 30px; width: 30px; " alt=""></div>
    <div id="play" class="buttons"  onclick="playSlideshow()"><img src="https://www.wierdenland.nl/img_25jaar/play_slideshow.png" style="height: 30px; width: 28px; padding-left: 2px  " alt=""></div>
    <div id="next" class="buttons"  onclick="nextSlide(); "><img src="https://www.wierdenland.nl/img_25jaar/next_slideshow.png" style="height: 30px; width: 30px; " alt=""></div>
    </div>
    
    
    <div id="slides" >
    
    <div class="slide showing" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/waterdrop.jpg'); background-size: contain;   background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Waterdrop</div>
    </div> 
    
    <div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/tropical.jpg'); background-size: contain;   background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Tropical</div>
    </div>
    
    <div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/sunset.jpg'); background-size: contain;   background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; ; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Sunset</div>
    </div>
        
    <div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/legs.jpg'); background-size: contain; background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; ; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Legs</div>
    </div>
    
    <div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/fisherman.jpg'); background-size: contain; background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; ; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Fisherman</div>
    </div>
    
    <div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/church.jpg'); background-size: contain; background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; ; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Church</div>
    </div>
    
    
    
    <div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/birds.jpg'); background-size: contain; background-position: center center">
    <div style="position: absolute; bottom:0px; background-color: black; ; color: white;  display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Birds</div>
    </div>
    
    
    
    </div>
    
    <script>
    
    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide,5000);
    if(currentSlide==0){document.getElementById('prev').style.opacity=0;}
    
    function nextSlide(){
    document.getElementById('next').style.opacity=1;
    document.getElementById('prev').style.opacity=1;
    goToSlide(currentSlide+1);
    document.getElementsByClassName('slide')[currentSlide].scrollTop=0
    }
    
    function prevSlide(){
    document.getElementById('next').style.opacity=1;
    document.getElementById('prev').style.opacity=1;
    goToSlide(currentSlide-1);
    document.getElementsByClassName('slide')[currentSlide].scrollTop=0
    }
    
    function goToSlide(n){
    slides[currentSlide].className = 'slide';
    currentSlide = (n+slides.length)%slides.length;
    if(currentSlide==0){document.getElementById('prev').style.opacity=0};
    if(currentSlide==slides.length-1){document.getElementById('next').style.opacity=0};
    slides[currentSlide].className = 'slide showing';
    }
    
    function pauseSlideshow(){
    clearInterval(slideInterval);
    document.getElementById('pause').style.display='none';
    document.getElementById('play').style.display='inline-block';
    }
    
    function playSlideshow(){
    nextSlide();
    slideInterval = setInterval(nextSlide,5000);
    document.getElementById('pause').style.display='inline-block';
    document.getElementById('play').style.display='none';
    }
    
    </script>  
    
    </body>
    
    </html>
    Last edited by molendijk; 06-03-2020 at 08:51 PM.

Similar Threads

  1. Captions not showing on Full Page Slideshow
    By Belniak in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-02-2015, 01:55 PM
  2. Add Captions to Slideshow
    By bornegraphics in forum JavaScript
    Replies: 9
    Last Post: 02-21-2012, 02:37 PM
  3. Slideshow picture captions HOW TO
    By coverland in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-28-2008, 06:31 PM
  4. MultiFrame Image Slideshow with captions?
    By Kofia in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-30-2007, 10:02 PM
  5. Slideshow with captions
    By Dwarin in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 02-12-2007, 10:34 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •