Results 1 to 2 of 2

Thread: Slide Show, Part Two

  1. #1
    Join Date
    Apr 2012
    Location
    Central New Jersey
    Posts
    258
    Thanks
    92
    Thanked 3 Times in 3 Posts

    Default Slide Show, Part Two

    Folks,

    Same page, https://www.njgunlawyers.com/page.php?here=FID , but with a different perplexing problem: The sizing issue appears to be completely solved (thanks to Coothead). The perplexing problem is that the slides present randomly, rather than sequentially. JS code:

    Code:
    "use strict";
    $(document).ready(function() {
    	var nextSlide = $("#slides img:first-child");
    	var nextCaption;
    	var nextSlideSource;
    	
    	// the function for running the slide show	
    	var runSlideShow = function() {   
            $("#caption").fadeOut(2000);
            $("#slide").fadeOut(2000,
            	function () {
           	     	if (nextSlide.next().length == 0) {
    					nextSlide = $("#slides img:first-child");
    }
    				else {
    					nextSlide = nextSlide.next();
    }
    				nextSlideSource = nextSlide.attr("src");
    				nextCaption = nextSlide.attr("alt"); 
    				$("#slide").attr("src", nextSlideSource).fadeIn(4500);					
    				$("#caption").text(nextCaption).fadeIn(4500);
    }
    )
    }
    	
    	// start slide show
        var timer1 = setInterval(runSlideShow, 4000);
        
        // start and stop the slide show
    	
    	$("#slide").click(function() {
    		if (timer1 != null) {
    	    	clearInterval(timer1);
    	    	timer1 = null;
    		}
    		else {
    			timer1 = setInterval(runSlideShow, 2000);
    		}
    	});
    	
    })
    Is there a simple fix?

    A.
    Last edited by marain; 09-23-2020 at 03:33 PM. Reason: Mark "Resolved"

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,647
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default


    Quote Originally Posted by marain View Post
    Is there a simple fix?
    Well, it looks as though the script that you have chosen for your project is faulty.
    So you could go back to the authors with your complaint.

    Alternatively, you could use a CSS method instead.

    Here is an example for your consideration...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <base href="https://www.njgunlawyers.com/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: normal 1em / 1.5em sans-serif;
     }
    #slides {
        position:relative;
        height: 16em;
     }
    #slides  img {
        position: absolute;
        height: 100%; 
        width: auto;
        left: 50%;   
        transform:translate(-50%, 0);
        opacity: 0;
        box-shadow:0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
        animation: fadeinout 24s ease-in-out infinite;
    }
    #slides img:nth-child(1) {
        animation-delay: 20s;
     }
    #slides img:nth-child(2) {
        animation-delay: 16s;
     }
    #slides img:nth-child(3) {
        animation-delay: 12s;
     }
    #slides img:nth-child(4) {
        animation-delay: 8s;
     }
    #slides img:nth-child(5) {
        animation-delay: 4s;
     }
    #slides img:nth-child(6) {
        animation-delay: 0s;
    }
    @keyframes fadeinout{
    8.333% {
        opacity: 1; 
      }
    16.666% {
        opacity: 0; 
      }
     }
    </style>
    
    </head>
    <body>
    
    <div id="slides">
     <img src="images/fid236x191.jpg" alt="">
     <img src="images/fid341x191.jpg" alt="">
     <img src="images/fid178x191.jpg" alt="">
     <img src="images/fid156x191.jpg" alt="">
     <img src="images/fid287x191.jpg" alt="">
     <img src="images/fid310x191.jpg" alt="">
    </div>
    
    </body>
    </html>
    

    coothead
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    marain (09-23-2020)

Similar Threads

  1. Ultimate Fade-In Slide Show - Advance slide on mouse click
    By gary.mcgill in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-24-2014, 12:14 PM
  2. Start at middle of a slide show & Mouseover Slide Message
    By Chaim in forum Looking for such a script or service
    Replies: 0
    Last Post: 09-13-2009, 10:31 PM
  3. show only part of mysql row
    By queerfm in forum PHP
    Replies: 2
    Last Post: 04-01-2008, 10:35 PM
  4. show a part of an xml file in html
    By queerfm in forum HTML
    Replies: 3
    Last Post: 02-03-2007, 04:03 PM
  5. Image Slide Show - Book Flip Slide Show
    By Peppy in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 01-17-2007, 04:11 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
  •