multiple dynamically created jquery slider galleries on one page -


i trying create page user can add jquery slider galleries page on click of button.

i have got working having problems rotation of images on additional sliders when there more one. , original slder jumps , shows 2 images.

i have created jsfiddle demonstrate http://jsfiddle.net/uukp4/25/

the additional sliders loop round once , stop

any appreciated.

code fiddle

css:

    #slideshow {         position:relative;         height:350px;     }     #slideshow img {         position:absolute;         top:0;         left:0;         z-index:8;         opacity:0.0;     }     #slideshow img.active {         z-index:10;         opacity:1.0;     }     #slideshow img.last-active {         z-index:9;     } 

jscript

    var i;     var topplus=50;     function buildslider(i, id, content) {          id = id + i;          var newdiv = document.createelement('div');         newdiv.setattribute('id', id);         newdiv.style.position = "absolute";         newdiv.style.top = +topplus + "px";         newdiv.style.left = +topplus + "px";         newdiv.style.display = 'inline-block';          newdiv.style.width = '320px';         newdiv.style.height = '270px';         newdiv.innerhtml = content;         document.getelementbyid("content").appendchild(newdiv);                     topplus=topplus+150;          function slideswitch() {             var $active = $('#' + id + ' #slide_image.active');              if ($active.length === 0) $active = $('#' + id + ' #slide_image:last');              var $next = $active.next().length ? $active.next() : $('#' + id + ' #slide_image:first');              $active.addclass('last-active');              $next.css({                 opacity: 0.0             })                 .addclass('active')                 .animate({                 opacity: 1.0             }, 1000, function () {                 $active.removeclass('active last-active');             });         }          $(function () {             setinterval(slideswitch, 3000);         });        i++;     }        function addslider() {             buildslider('i', 'draggable', '<div id="slideshow"><img id="slide_image" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img id="slide_image"  src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');     } 

html

<input type='button' value='add slider' id='addslider' onclick='addslider();'> 

first thing's first: when dealing adding dynamically created elements of unknown quantities, best use classes, not ids, because more malleable , using same id on multiple elements invalid html, don't it.

after switching ids on classes, noticed new slideshows absolutely positioned should avoided dynamically creating elements of unknown number. result, instead floated containers , used clear:both make sure didn't overlap.

initially removed large chunk of buildslider function, opted remove because can function did in 1 line. removed container div did nothing gave dimensions, opting put css instead.

as changes jquery itself, relatively simple once elements given appropriate classes. biggest changes moved setinterval outside of slideswitch function prevent overlapping each other, added parameter (the parent object) allow multiple slideshows run different starting/transition points, , opted css based transition: opacity 1s; jquery's .css on jquery's .animate performance , ease-of-editability reasons. instead of going each .animate , changing animation duration, can change 1s of transition , apply of animations

as saw in rough demo posted in comments, there glitch in 1 transition , first slide slow load. first issue due overlapping issue in transition last slide first slide , solved changing .animates .css , adding css transition mentioned earlier. second problem due there not being active class default, added class first img in appended html. however, made appear added .animate after appended don't have worry iteration of setinterval

here full code

/* html */ <input type='button' value='add slider' onclick='addslider()'> <div id="content"></div>  /* css */ #content {     overflow:hidden; } .slideshow {     float:left;     clear:both;     position:relative;     width:270px;     height:350px; } .slideshow img {     position:absolute;     width:320px;     height:270px;     top:0;     left:0;     z-index:8;     opacity:0.0;     transition: opacity 1s; } .slideshow img.active {     z-index:10; } .sdeshow img.last-active {     z-index:9; }  /* javascript/jquery */ var = 0;     function slideswitch($container) {     var $active = $container.find('.slide_image.active');          if ($active.length === 0) { $active = $container.find('.slide_image:last'); }     var $next = $active.next().length ? $active.next() : $container.find('.slide_image:first');      $active.addclass('last-active').removeclass('active').css({         opacity: 0     });      $next.addclass('active')         .css({         opacity: 1.0     }, function () {         $active.removeclass('last-active');     }); }  function addslider() {     $('#content').append('<div class="slideshow"><img class="slide_image active" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img class="slide_image"  src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img class="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');     var $addedelem = $('.slideshow:eq(' + + ')');     $addedelem.find('.active').animate({ opacity: 1 });     setinterval(function() { slideswitch($addedelem) }, 3000);     i++; } 

full demo here

please let me know if have questions related code


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -