上一个下一个带有计数器的按钮，用于使用jQuery进行覆盖 [英] Prev & Next button with counter for overlay using jQuery

问题描述

我使用jquerytools构建此图片库，我在拇指上使用可滚动div并覆盖在主图像上...一切都像魅力一样.

I build this image gallery using jquerytools, I'm using scrollable div on thumbs and overlay on the main image... Everything works like charm..

在我悬赏之前...我必须解释一下，我需要像这样干净整洁的东西，因为图像来自php(已加密)，而我不能修改它，只是视图" "，因为我需要使用类和ID之类的方法来实现此目的.这就是为什么我尝试这个，但是...

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...

问题是，当您查看叠加层时，我需要插入下一步"和上一步"按钮...，以便在叠加层被加载后可以浏览图像.

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..

我为你做了这个小提琴，我的老师充满智慧，可以看到我在说什么. http://jsfiddle.net/s6TGs/5/

I have made this fiddle for you my teachers full of wisdom can see what I am saying. http://jsfiddle.net/s6TGs/5/

我真的尝试过.但是api.next()它可用于滚动拇指，所以我不知道如何告诉此脚本.嘿，如果单击next，请插入下一个url，如果单击了先前的btn，请用大拇指去上一个网址.但是我不能

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

同样重要的是，必须显示一个类似1/8的计数器= S ...如何以JavaScript的名义执行此操作.

Also and no less important a Counter like 1/8 have to be displayed =S... how in the name of JavaScript you do this..

这是我的代码

$(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
  });
});

我知道这是我的回答的一部分，我可以使它起作用:(

I know here is part of my answer I just can make it work :(

http://jquerytools.org/demos/combine/portfolio/index.html

感谢QuakeDK的第一个回答，我几乎实现了目标..但是计数器不正确，同样，当您获得4图像(计数器上的数字5)时，您也无法进入第5拇指.是集成了该答案的CODE

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

http://jsfiddle.net/xHL35/5/

这是PREV&的代码下一个按钮

And here is the CODE for PREV & NEXT BUTTON

//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");    
        });

这里一定有一个奖励选择，如果有人帮助我，我给您20盒！ jajaja我很绝望.因为现在我还需要为每个图像显示标题，并且我认为这与URL替换的过程相同，但是下一个& prev只是我无法管理的..在palpal上发布完整的解决方案和您的电子邮件，我将支付20！

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!

推荐答案

好吧，从没尝试过jQueryTOOLS，所以觉得玩起来会很有趣.

Okay, never tried jQueryTOOLS, so thought it would be fun to play with.

首先，这是我刚刚创建的JSFiddle: http://jsfiddle.net/xHL35/1/

first of all, here's the JSFiddle I just created: http://jsfiddle.net/xHL35/1/

现在，API调用需要一个变量来保存它

Now, the API calls need a variable to hold it

 $(".scrollable").scrollable();
 var scrollapi = $(".scrollable").data("scrollable");

现在scrollapi，可以调用以下函数:

Now scrollapi, can call the functions like this:

scrollapi.next(200);

我已经复制了您自己的用于选择图像的代码，并重写了它以适合NEXT图像. 我还没有创建PREV函数，但是反转NEXT函数应该不那么困难.

I've copied your own code for choosing image and just rewritten it to fit the NEXT image. I haven't created the PREV function, but should not be that hard to reverse the NEXT function.

$(".nextImg").click(function(){
    // Count all images
    var count = $(".items img").length;

    // Finding the next image
    var next = $(".items").find(".active").next("img");
    // Is the next image, the last image in the wrapper?
    if(next.is(":last")){
        // If it is, go to next DIV and get the first image
        next = $(".items").find(".active").parent().next("div").find("img:first");
        // If this dosn't exists, we've reached the end
        if(next.index() == -1){
          // We have reached the end - start over.
          next = $(".items img:first");
          scrollapi.begin(200);
        } else {
          // Not at the end, show next div in thumbs
          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;

    // Show the counter
    $("#imageCounter").html("Image: "+current+" of "+count);

    // activate item
    $(".items img").removeClass("active");
    next.addClass("active");

});

希望您可以使用它来开发画廊的其余部分.

Hoping you can use this to develop the rest of the gallery.

这篇关于上一个下一个带有计数器的按钮，用于使用jQuery进行覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！