[JQuery] Slideshow-VBForums
Results 1 to 1 of 1

Thread: [JQuery] Slideshow

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,202

    [JQuery] Slideshow

    A simple slideshow image gallery. It uses Unicode text for the arrows(VBForums converts the hex character to the character), FlexBox for the ordering, and JQuery for the fade effects.

    HTML
    Code:
    <div id="slideshow">
      <img alt="❮" class="slideshowButtons" id="btnPrevious" />
      <img id="slide" src="" />
      <img alt="❯" class="slideshowButtons" id="btnNext" />
    </div>
    CSS
    Code:
    #slideshow {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      
      height: 250px;
    }
    
    .slideshowButtons {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      
      cursor: pointer;
      padding: 0 1em;
    }
    
    #slide {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 250px;
      -ms-flex: 0 1 250px;
      flex: 0 1 250px;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    JQuery - Not Timed
    Code:
    var index = 0;
    var images = ["http://lorempixel.com/250/200/people/", "http://lorempixel.com/250/200/animals/"];
    
    $(document).ready(function(){
    	$("#slide").attr("src", images[index]);
    	$("#btnPrevious").click(function(){
    		index = (index - 1 < 0 ? images.length - 1 : index - 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(250,1);
    	});
    	$("#btnNext").click(function(){
    		index = (index + 1 > images.length - 1 ? 0 : index + 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(250,1);
    	});
    });
    JQuery - Timed
    Code:
    var index = 0;
    var images = ["http://lorempixel.com/400/200/abstract/", "http://lorempixel.com/400/200/animals/"];
    
    $(document).ready(function(){
    	$("#slide").attr("src", images[index]);
    	$("#btnPrevious").click(function(){
    		index = (index - 1 < 0 ? images.length - 1 : index - 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(250,1);
    	});
    	$("#btnNext").click(function(){
    		index = (index + 1 > images.length - 1 ? 0 : index + 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(2520,1);
    	});
    	offsetLoop(0, 5, 5);
    });
    
    function offsetLoop(i, counter, idsRemaining) {
    	while (idsRemaining >= 0) {
    		i++;
    		idsRemaining--;
    		if (idsRemaining >= 0) {
    			setTimeout(function () {
    				offsetLoop(i, counter, idsRemaining);
    			}, 1000);
    		   break;
    		}
    	}		  
    	if (idsRemaining < 0 ) {
    		$("#btnNext").click();
    		offsetLoop(0, 5, 5);
    	}
    };
    Not Timed Fiddle: https://jsfiddle.net/mja903yh/
    Timed Fiddle: https://jsfiddle.net/strdz57p/
    Last edited by dday9; Jan 10th, 2016 at 12:30 AM.

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.