0

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

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

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

这是我使用的代码。我已经省略了<link>and<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。

4

1 回答 1

0

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

正如许多在 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>";
于 2015-06-29T09:53:38.367 回答