0

It's my current gallery:

<div class="gallery">
   <a href="images/big/01.jpg" class="photo"><img alt="" src="images/gallery/01.jpg"></a>
   <a href="images/big/02.jpg" class="photo"><img alt="" src="images/gallery/02.jpg"></a>
   <a href="images/big/03.jpg" class="photo"><img alt="" src="images/gallery/03.jpg"></a>
   <a href="images/big/04.jpg" class="photo"><img alt="" src="images/gallery/04.jpg"></a>
   <button class="more">show me more</button>
</div>

Here is a shot: http://i.stack.imgur.com/24K7n.png

I just want to make the button load another line of images that I put in a specific DIV, when clicked.

The main goal is load: It means I want to get new images requests just after the click. I think it should be done by using jquery DOM.

4

3 回答 3

0

这是一个非常基本的问题。您应该阅读有关 DOM 操作http://api.jquery.com/category/manipulation/的 jQuery 文档

回答您的问题：您可以使用before在按钮之前插入 DOM 元素：

$(".more").before('<a href="images/big/05.jpg" class="photo"><img alt="" src="images/gallery/05.jpg"></a>')
于 2013-09-08T10:20:19.447 回答
0

别担心，这很容易做到。

假设您有另一个 div，其中包含更多图像，当前隐藏：

<div class="gallery2" style='display:none'> 
    <a href="images/big/05.jpg" class="photo"><img alt="" src="images/gallery/01.jpg"></a>
    <a href="images/big/06.jpg" class="photo"><img alt="" src="images/gallery/02.jpg"></a>
    <a href="images/big/07.jpg" class="photo"><img alt="" src="images/gallery/03.jpg"></a>
    <a href="images/big/08.jpg" class="photo"><img alt="" src="images/gallery/04.jpg"></a>
    <button class="more">show me more</button>
</div>

为了显示该 div 在您的 document.ready 事件中运行一行简单的 jQuery。

 $('.gallery2').show();

希望有帮助。

于 2013-09-08T10:23:18.797 回答
0

像这样的东西怎么样：FIDDLE。

我假设图像只是增加一。

JS：

var num = 4;
var incr = 4;
$(function() {
    $('button.more').click(function(){
        for (var i = 0; i < incr; i++){
            num++;
            var a = $('<a class="photo"></a>')
                .attr('href', 'images/big/' + padLeft(num.toString(), '0', 2) + '.jpg');
            var img = $('<img alt="" />')
                .attr('src', 'images/gallery/' + padLeft(num.toString(), '0', 2) + '.jpg');
            a.append(img);
            a.insertBefore($(this));
        }
    });
});

function padLeft(str, pad, len) {
    var val = str;

    while (val.length < len)
        val = pad + val;    

    return val;
}
于 2013-09-08T10:26:08.543 回答