Question

我尝试使用Pikachoose（图像滑块）和Colorbox（替代灯箱，我遇到了同样的问题），但每当我点击图像（而不是缩略图）时，图像就会打开在一个全新的窗口。 Pikachoose按预期工作。

我已经按照＆＃34;用法＆＃34;页面确切，并检查我的示例代码，除了图像之间的链接，它们相同。你可以看到我在<div class='pikachoose'>标记之外有一个单独的图像，它可以按预期工作。

有人知道如何使两者兼容吗？

以下是我使用的代码。我已经省略了<link>和<script>标签以节省空间，因为我知道我已经让它们正确无误。

<head>
    <script>
    $(document).ready(function (){
        $("#pikame").PikaChoose();
    });
</script>
</head>
<body>
<div class="pikachoose">
    <ul id="pikame">
    <!-- to 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>

替代问题：有没有人知道任何非常低调的插件，它们具有彩盒/灯箱功能？类似亚马逊，Ebay。

Answer 1

我放弃了尝试使两者兼容，并继续创建我自己的。我尽量保持它的轻量级，同时仍然看起来很好并且运行良好。

许多jQuery经验（即使只是适度），可能会告诉我还在学习 - 任何评论/修复等都会受到高度赞赏。

JSFiddle

自动循环似乎不适用于JSFiddle，但在我的网站上工作正常。出于某种原因，第一张图片不会加载到灯箱中，直到你先点击拇指 - ~~再次这只是一个JSFiddle问题~~这似乎是我写的PHP版本中的一个不幸事故，但是我似乎找不到这个的真正原因。我猜它是因为我第一次打印出错误的主图像，但让jQuery修补它。如果有人能让我知道是什么造成了这种情况，我会很高兴，因为我无法看到。为了解决这个问题，我在最后调用$('.thumb:first').click();来模拟点击第一个拇指。它在JSFiddle上的样式与通常略有不同，但它仍然有效。

它使用非常简单的HTML - 基本图像和链接标记，对此没什么好说的。

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

一些非常简单的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;
}

注意javascript：

$(document).ready(function() {
    //setting the timer for automatic cycling as a variable
    var timer = setInterval('CycleImages()', 5000);
    //checking if the user is hovering over the slider
    $('#slider').hover(function(ev){
        //cancels the timer if the user is hovering
    clearInterval(timer);
    }, function(ev){
        //calls the timer if the user is not hovering
    timer = setInterval('CycleImages()', 5000);
    });
    //clicking thumbnails
    $(".image").click(function() {
        var image = $(this).attr("rel"); //getting the rel tag from the a tag
        var title = $(this).attr("data-title"); //data title from a 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 for the new image
            $('#image').fadeIn('fast'); //fades in the new image
        });
        $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>'); //HTML for the new image
        $(this).siblings().find('img').removeClass('active'); //removes active class from old thumbnail
        $(this).find('img').addClass('active'); //adds the active class to the new active thumbnail
        return false;
    });
    $('.thumb:first').click();
});

function CycleImages(){
//if there is another thumbnail img after currently selected
    if($('.active').parent().next().find('img').length > 0) {
        //simulate clicking the next thumbnail
        $('.active').parent().next().find('img').click();
    } else {
        //if there is only one image
        if($('.thumb:first').parent().next().find('img').length == 0 ) {
            return;
        } else {
        //if not simulate clicking the first thumbnail
        $('.thumb:first').click();
        }
    }
}

我使用PHP代替我，从数组中提取图像 - 我认为这会更容易添加更多图像（以及稍后更改图像），并且将来我计划从数据库中提取图像，这样这样做会更容易。

//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 as $image){ //looping images
    if($i == 0) { //if first loop
        //print out first image as the 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 the div tag for the 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>";

Pikachoose与Colorbox的兼容性

1 个答案: