StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPrev & Next button with counter for overlay using jQuery
text
Body
copied!<p>I build this image gallery using jquerytools, I'm using scrollable div on thumbs and overlay on the main image... Everything works like charm.. </p> <p>EDIT: Before I make this a bounty...I have to explain that I need something clean and simple like this, because the images come from php (encrypted) , and I can't modify this, just the "view" as I need to achieve this with something like classes and ids. This is why I try this but...</p> <p>The problem is I need to insert a Next and Prev Buttons when you are viewing the overlay... so you can go trough the images, once the overlay has been loaded..</p> <p>I have made this fiddle for you my teachers full of wisdom can see what I am saying. <a href="http://jsfiddle.net/s6TGs/5/" rel="nofollow noreferrer">http://jsfiddle.net/s6TGs/5/</a></p> <p>I have really tried. but api.next() it's working for the scrolling on the thumbs , so I don't know how can I tell this script.. hey if next is clicked, yo pls insert next url on thubs, if previous btn is clicked, pls go to prev url on thumbs.. But I can't</p> <p>Also and no less important a Counter like 1/8 have to be displayed =S... how in the name of JavaScript you do this..</p> <p>Here is My code</p> <pre><code>$(function() { $(".scrollable").scrollable(); $(".items img").click(function() { // see if same thumb is being clicked if ($(this).hasClass("active")) { return; } // calclulate large image's URL based on the thumbnail URL (flickr specific) var url = $(this).attr("src").replace("_t", ""); // get handle to element that wraps the image and make it semi-transparent var wrap = $("#image_wrap").fadeTo("medium", 0.5); var wrap2 = $("#mies1"); // the large image from www.flickr.com var img = new Image(); // call this function after it's loaded img.onload = function() { // make wrapper fully visible wrap.fadeTo("fast", 1); // change the image wrap.find("img").attr("src", url); wrap2.find("img").attr("src", url); }; // begin loading the image from www.flickr.com img.src = url; // activate item $(".items img").removeClass("active"); $(this).addClass("active"); // when page loads simulate a "click" on the first image }).filter(":first").click(); }); // This makes the image Overlay with a div and html $(document).ready(function() { $("img[rel]").overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#ebecff', loadSpeed: 200, opacity: 0.9 }, closeOnClick: true }); }); </code></pre> <p>I know here is part of my answer I just can make it work :(</p> <p><a href="http://jquerytools.org/demos/combine/portfolio/index.html" rel="nofollow noreferrer">http://jquerytools.org/demos/combine/portfolio/index.html</a></p> <p>EDIT: Thanks to the first answer by QuakeDK I almost achieve the goal.. But the counter is not ok, also when you get to the 4 image (number 5 on counter) you cant go to the 5th thumb .. This is the CODE with that answer integrated</p> <p><a href="http://jsfiddle.net/xHL35/5/" rel="nofollow noreferrer">http://jsfiddle.net/xHL35/5/</a></p> <p>And here is the CODE for PREV & NEXT BUTTON</p> <pre><code>//NExt BTN $(".nextImg").click(function(){ // Count all images var count = $(".items img").length; var next = $(".items").find(".active").next("img"); if(next.is(":last")){ next = $(".items").find(".active").parent().next("div").find("img:first"); if(next.index() == -1){ // We have reached the end - start over. next = $(".items img:first"); scrollapi.begin(200); } else { scrollapi.next(200); } } // Get the current image number var current = (next.index("img")); var nextUrl = next.attr("src").replace("_t", ""); // get handle to element that wraps the image and make it semi-transparent var wrap = $("#image_wrap").fadeTo("medium", 0.5); var wrap2 = $("#mies1"); // the large image from www.flickr.com var img = new Image(); // call this function after it's loaded img.onload = function() { // make wrapper fully visible wrap.fadeTo("fast", 1); // change the image wrap.find("img").attr("src", nextUrl); wrap2.find("img").attr("src", nextUrl); }; // begin loading the image from www.flickr.com img.src = nextUrl; $("#imageCounter").html("Image: "+current+" of "+count); // activate item $(".items img").removeClass("active"); next.addClass("active"); }); //PREV BTN $(".prevImg").click(function(){ // Count all images var count = $(".items img").length; var prev = $(".items").find(".active").prev("img"); if(prev.is(":first")){ prev = $(".items").find(".active").parent().prev("div").find("img:first"); if(prev.index() == -1){ // We have reached the end - start over. prev = $(".items img:first"); scrollapi.begin(200); } else { scrollapi.prev(200); } } // Get the current image number var current = (prev.index("img")); var prevUrl = prev.attr("src").replace("_t", ""); // get handle to element that wraps the image and make it semi-transparent var wrap = $("#image_wrap").fadeTo("medium", 0.5); var wrap2 = $("#mies1"); // the large image from www.flickr.com var img = new Image(); // call this function after it's loaded img.onload = function() { // make wrapper fully visible wrap.fadeTo("fast", 1); // change the image wrap.find("img").attr("src", prevUrl); wrap2.find("img").attr("src", prevUrl); }; // begin loading the image from www.flickr.com img.src = prevUrl; $("#imageCounter").html("Image: "+current+" of "+count); // activate item $(".items img").removeClass("active"); prev.addClass("active"); }); </code></pre> <p>There must be a reward option here, if somebody help me I give you 20box! jajaja I'm desperate. Because now I also need to display title for each image, and I think it's the same process of URL replace, but next & prev is just something I can't manage.. Post the full solution and your email on paypal, I will pay 20!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload