Selected element rotation in Jquery -


i'm trying build own lightbox using jquery i'm stuck on getting next image show up. know current build not working because $("element").next() same . need somehow make selector variable rotates next element every time button pressed. how can in jquery? other tips on wrong code welcome too.

this got far:

(function( $ ) {      $.fn.jlight = function(options) {       var settings = $.extend({     // these defaults.     shadowwidth: $(window).width(),     shadowheight: $(document).height(),     width: $(".jimage-container img").width(),     height: $(".jimage-container img").height(),     },options);      var left = ($(window).width() - $(this).outerwidth()) / 6;     var bot = $(window).height() /2     var bottom = bot/2;     var img = $("#showbox").find("img").attr("src");      console.log(img);       $(this).click(function(){         console.log('clicked showbox');          $(document).keyup(function(event){             var key = event.which;                         switch(key) {           case 37:               console.log("pressed left");               var go = $("#showbox img").attr("class");               $("#showbox img").prev(go)               if (go == "img-responsive first"){                 var img = $("#showbox img:last").attr("src")                 $('#jimg').attr("src", img);               }               else{                   var img = $("#showbox img").prev("img").attr("src");                   var stop = $("#showbox img").prev("img").attr("class");                   $('#jimg').attr("src", img);                    if (stop == "img-responsive last"){                     console.log("last!!!!");                      var last = $("#showbox img").find(":first").attr("src");                     /*$('#jimg').attr("src", last);*/                   }               }               console.log(last, img)               break;                      }            });          $("<div class=\"jshadow\"></div>").appendto( "body" ).css({"width" : ""+settings.shadowwidth+"", "height" : ""+settings.shadowheight+""}).animate({"opacity" : "0.8"}); /*setting shadow*/         $("<div class='jimage-containter'></div>").appendto("body").animate({"opacity" : "1.0"}, function(){              $("<img src="+img+" class='img-responsive' id='jimg'></img>").appendto(this);         }); /*setting imagefield */         $(".jimage-containter").css({"width" : settings.width, "height" : settings.height, "left" : left, "bottom" : bottom})         $(".jshadow").click(function(){ $(".jimage-containter").animate({"opacity" : "0"}, function(){ $(".jimage-containter").remove() }),$(this).animate({"opacity" : "0"}, function(){ $(this).remove( ".jshadow"), console.log('goodbye!'); }) }); /*removing shadow*/         $("#showbox").find("img").last().addclass("last");         $("#showbox").find("img").first().addclass("first");         });     };  }( jquery ));   $(document).ready(function(){     $('#showbox').jlight() });

html:

<body> <header></header> <div class="container">     <div class="col-md-3 col-sm-3 drie">     </div>     <div class="col-md-9 col-sm-9 negen">       <div class="object"></div>      <div class="object2" id="showbox">      <img src="images/home-background.jpg" class="img-responsive" />      <img src="images/no-image.jpg" class="img-responsive"  />      <img src="images/koala.jpg" class="img-responsive"  />      </div>       <div class="object3"></div>       <div class="div"></div>         </div> </div>  </body>

when lightbox fired, should reference upfront of images associated set of images displayed. lb plugins using rel attribute.

single image:

<a href="kitten.jpg" rel="lightbox">kitten</a>

several images:

<a href="kitten1.jpg" rel="lightbox['cats']">kitten</a> <a href="kitten2.jpg" rel="lightbox['cats']">kitten</a> <a href="kitten3.jpg" rel="lightbox['cats']">kitten</a>

so, if this:

$("a").on("click", function(){   var collection = this.rel,       links = $("a[rel='" + collection + "']"),       images = [];    links.each(function(){     images.push(this.href);   });    // lightbox stuff });

then no longer reliant on using $("element").next() can cycle backwards , forwards through images array.


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more