0

Pikachoose (画像スライダー) と Colorbox (同じ問題を抱えていたライトボックスの代替) を使用しようとしていますが、画像 (サムネイルではなく) をクリックするたびに、画像がまったく新しいウィンドウで開きます。 . Pikachoose は期待どおりに動作しています。

「使用法」ページを正確にたどり、サンプルコードと照らし合わせて確認しましたが、画像間のリンクを除いて同一です。<div class='pikachoose'>タグの外側に別の画像があることがわかります。これは期待どおりに機能します。

2つを互換性にする方法を知っている人はいますか？

これが私が使用したコードです。スペースを節約するためにタグ<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>

別の質問: カラーボックス/ライトボックス機能を備えた非常に控えめなギャラリー プラグインを知っている人はいますか? アマゾン、イーベイに似ています。

4

1 に答える 1

0

両者を両立させるのは諦め、代わりに独自のものを作ることにしました。見栄えと機能性を維持しながら、可能な限り軽量に保つようにしました。

多くの jQuery の経験者 (たとえ中程度であっても) と同様に、私がまだ学習中であることがわかるでしょう。コメントや修正などは大歓迎です。

JSFiddle

自動循環は JSFiddle では機能していないようですが、私のサイトでは正常に機能しています。なんらかの理由で、最初にサムをクリックするまで最初の画像がライトボックスに読み込まれません -これも単なる JSFiddle の問題です。この原因。最初にメイン画像を間違って印刷したことが原因だと思いますが、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 に答える