Question

我需要一些有jquery技能的人的帮助。我的问题是我有一个小的6x缩略图，如下面的图片。我添加了6张空照片。当我添加7张或更多图片时，我想限制6x图片，并使用next-prev按钮跳转到下一张图片。

html代码是;

<div class="content">
                    <h3>Photo Gallery</h1>
                     <hr/>
                      <ul id='da-thumbs' class='da-thumbs'>
                            <li><a class="swipebox" data-title="Image Title" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" /></a></li> 
                            <li>
                                <a class="swipebox" data-title="Image Title 2" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 3" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 4" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 5" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                            <li>
                                <a class="swipebox" data-title="Image Title 6" href="images/photo.jpg">
                                    <img src="images/square.jpg" alt="image" />
                                </a>
                            </li>
                        </ul>                            
                        <div class="previous">
                            <a href="#" class="next-prev">&#8249; Geri</a>
                        </div>
                        <div class="next">
                            <a href="#" class="next-prev">İleri &#8250;</a>
                        </div>
                    <div class="clear"></div>

当我点击小缩略图时，它会打开一个大缩略图。 Gallery触发器代码是;

  // PHOTO GALLERY IMAGES
    jQuery(document).ready(function () {
        jQuery('#photos').click(function (e) {
            e.preventDefault();
            jQuery(this).lightGallery({
                dynamic: true,
                caption: true,
                thumbnail: true,
                desc: true,
                speed: 500,
                dynamicEl: [
                    {
                        "src": "images/photo.jpg",
                        "thumb": "images/thumb.jpg",
                        "caption": "Michael Stark",
                        "desc": "Quem legam expetendis"
            },
                    {
                        "src": "images/photo.jpg",
                        "thumb": "images/thumb.jpg",
                        "caption": "Michael Stark",
                        "desc": "Duis de mentitum"
            },
                    {
                        "src": "images/photo.jpg",
                        "thumb": "images/thumb.jpg",
                        "caption": "Michael Stark",
                        "desc": "Duis de mentitum"
            }
        ]
            });
        });
    });

感谢您的帮助！

Answer 1

看起来你的html是静态的，所以我就是这样做的：

对于ul图像1-6，添加.active-da-thumbs类

var mongoose = require('mongoose'),
ModelA = mongoose.model('ModelA'),
ModelB = mongoose.model('ModelB'),
_ = require('lodash');

克隆你的ul图像7 - 12

<ul id='da-thumbs' class='da-thumbs active-da-thumbs'>
....
</ul>

还要为您的a分配类，以便我们可以在js中调用它：

<ul id='da-thumbs' class="da-thumbs'>....</ul>

CSS，隐藏除活动之外的所有内容：

<a href="#" class="next-prev thumbs-next">&#8249; Geri</a>
<a href="#" class="next-prev thumbs-prev">İleri &#8250;</a>

然后使用jQuery隐藏和显示：

.da-thumbs { display: none }
.active-da-thumbs { display: block }

你可能需要将你的ul包装在div中，不知道uls将如何对jQuery做出反应。忘记提及，但如果你想使用插件，请尝试查看猫头鹰旋转木马。

在我的图库中添加next和prev按钮

1 个答案: