jquery - Pikachoose compatibility with Colorbox -
i'm trying use pikachoose (an image slider) along colorbox (alternative lightbox, had same issue on), whenever click on image (not thumbnail), image opens in whole new window. pikachoose working expected.
i've followed "usage" page exactly, , checked mine against examples code, , they're identical except links between images. can see i've got separate image outside of <div class='pikachoose'> tag, works expected.
does know how make 2 compatible?
here code i've used. i've omitted <link> , <script> tags save space know i've got them correct.
<head> <script> $(document).ready(function (){ $("#pikame").pikachoose(); }); </script> </head> <body> <div class="pikachoose"> <ul id="pikame"> <!-- override thumbnails use <img src="thumbnail.jpg" ref="fullsize.jpg"> --> <li><a class="group1" href="images/image1.png"><img src="images/image1.png"/></a></li> <li><a class="group1" href="images/image2.png"><img src="images/image2.png"/></a></li> </ul> </div> <a class="group1" href="images/image1.png"><img src="images/image2.png"/></a> <script> jquery('a.group1').colorbox(); </script> </body> alternate question: know gallery plugins low key, have colorbox/lightbox functionality? akin amazon, ebay.
i gave trying make 2 compatible, , went on creating own instead. tried keep lightweight possible while still looking nice , functioning well.
as many experienced in jquery (even if moderately), can tell i'm still learning - comments/fixes etc appreciated.
automatic cycling doesn't seem work on jsfiddle working fine when on site. reason first image won't load lightbox until click thumb first - again jsfiddle problem seemed mishap in php version wrote, can't seem find actual cause of this. i'm guessing it's due me printing out main image wrong first time, letting jquery patch up. if let me know caused i'd greatful can't see. fix it, called $('.thumb:first').click(); @ end simulate clicking first thumb. styles differently on jsfiddle usually, still works.
it uses simple html - basic image , link tags, there's not it.
<div id="slider"> <div id='image'> <a href='http://dummyimage.com/250x250/000000/fff&text=1' data-lightbox='image-1' data-title='test1'><img src='http://dummyimage.com/250x250/000000/fff&text=1' border='0' class='image'/></a> </div> <div id='thumbs'> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=1' data-ligtbox='image-1' data-title='test1' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=1' class='thumb active' border='0'/></a> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=2' data-title='test2' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=2' class='thumb' border='0'/></a> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=3' data-title='test3' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=3' class='thumb' border='0'/></a> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=4' data-title='test4' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=4' class='thumb' border='0'/></a> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=5' data-title='test5' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=5' class='thumb' border='0'/></a> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=6' data-title='test6' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=6' class='thumb' border='0'/></a> </div> </div> some simple css
#image { padding:5px; float: left; } #thumbs { float:left; width: 115px; overflow: hidden; } .image { height: 500px; width: 500px; } .thumb { height: 50px; width: 50px; opacity: 0.6; padding: 2px; border: 1px solid white; } .active { opacity: 1; border: 1px solid lightgrey; } noted javascript:
$(document).ready(function() { //setting timer automatic cycling variable var timer = setinterval('cycleimages()', 5000); //checking if user hovering on slider $('#slider').hover(function(ev){ //cancels timer if user hovering clearinterval(timer); }, function(ev){ //calls timer if user not hovering timer = setinterval('cycleimages()', 5000); }); //clicking thumbnails $(".image").click(function() { var image = $(this).attr("rel"); //getting rel tag tag var title = $(this).attr("data-title"); //data title tag $('#image').fadeout('fast', function() { //fades out last image $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>'); //html new image $('#image').fadein('fast'); //fades in new image }); $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>'); //html new image $(this).siblings().find('img').removeclass('active'); //removes active class old thumbnail $(this).find('img').addclass('active'); //adds active class new active thumbnail return false; }); $('.thumb:first').click(); }); function cycleimages(){ //if there thumbnail img after selected if($('.active').parent().next().find('img').length > 0) { //simulate clicking next thumbnail $('.active').parent().next().find('img').click(); } else { //if there 1 image if($('.thumb:first').parent().next().find('img').length == 0 ) { return; } else { //if not simulate clicking first thumbnail $('.thumb:first').click(); } } } i used php mine, pull images array - thought easier add more images (and change images later) , in future plan on pulling images database easier.
//setting images multidimensional array images = array( array("http://dummyimage.com/250x250/000000/fff&text=1","test1"), array("http://dummyimage.com/250x250/000000/fff&text=2","test2"), array("http://dummyimage.com/250x250/000000/fff&text=3","test3"), array("http://dummyimage.com/250x250/000000/fff&text=4","test4"), array("http://dummyimage.com/250x250/000000/fff&text=5","test5"), array("http://dummyimage.com/250x250/000000/fff&text=6","test6"), ); $i = 0; //counter foreach($images $image){ //looping images if($i == 0) { //if first loop //print out first image large image print "<div id='image'>\n<a href='".$image[0]."' data-lightbox='image-1' data-title='".$image[1]."'><img src='".$image[0]."' border='0' class='image'/></a>\n</div>"; //start div tag thumbs print "<div id='thumbs'>"; } //print out thumb print "<a href='#' rel='".$image[0]."' data-title='".$image[1]."' class='image'><img src='".$image[0]."' class='thumb"; if($i==0) { print " active"; }; //makes first thumb active print "' border='0'/></a>"; $i++; //updates counter } print "</div>";
Comments
Post a Comment