Pikachoose 与 Colorbox 的兼容性

Question

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

我完全按照 "Usage" 页面，并根据示例代码检查了我的页面，除了图像之间的链接外，它们是相同的。你可以看到我在 <div class='pikachoose'> 标签之外有一个单独的图像，它按预期工作。

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

这是我用过的代码。我省略了 <link> 和 <script> 标签以保存 space 因为我知道我已经把它们弄对了。

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

备选问题：有人知道任何非常低调且具有 colorbox/lightbox 功能的画廊插件吗？类似于 Amazon、Ebay。

Answer 1

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

正如许多在 jQuery 中有经验的人（即使只是适度），可能可以看出我仍在学习 - 任何 comments/fixes 等都将不胜感激。

JSFiddle

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

使用非常简单的HTML——基本的图片和link标签，没什么好说的。

<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 的兼容性

Pikachoose compatibility with Colorbox

jquery

colorbox

pikachoose