Create a button in order to add a group of photos to a gallery

Question

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: https://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.

If you are asking how to load new images by getting them from server or from any other URL then you can use ajax — keshu_vats, Sep 08 '13 at 10:20

score 0 · Answer 1 · answered Sep 08 '13 at 10:20

This is a very basic question. You should read the jQuery docs about DOM manipulation http://api.jquery.com/category/manipulation/

To answer your question: You can use before to insert a DOM element before your button:

$(".more").before('<a href="images/big/05.jpg" class="photo"><img alt="" src="images/gallery/05.jpg"></a>')

score 0 · Answer 2 · answered Sep 08 '13 at 10:23

Don't worry this is easy to do.

Let's say you got another div with some more images, currently hidden:

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

To show that div run one simple line of jQuery in your document.ready event.

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

Hope that helps.

I noted that want to Load the images from Server, not just a simple Show. In your solution, the image will load from the server with the page load time. — Farzad Bayan, Sep 08 '13 at 10:49

Paul Fleming · Accepted Answer · 2013-09-08T10:34:35.963

0

How about something like this: FIDDLE.

I'm assuming the images simply increment by one.

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

edited Sep 08 '13 at 10:34

answered Sep 08 '13 at 10:26

Paul Fleming

24,238
8
76
113

The href have the `images/big/0X.jpg` pattern, but the src is `images/0X.jpg`. Your code is a bit different. – Farzad Bayan Sep 08 '13 at 10:32
Just a trivial mistake. I hadn't notice the difference. Here's it repaired: http://jsfiddle.net/xvzKP/1/ – Paul Fleming Sep 08 '13 at 10:34
Done, but there is a unexpected result. The fancy effect, won't work on the new added images & don't know the reason. They have `class="photo"`, so why? – Farzad Bayan Sep 08 '13 at 10:40
However, as another achievement, can it have a limit? For example just load 20 image maximum? It loads unlimited now. – Farzad Bayan Sep 08 '13 at 10:41
My guess would be that you're registering a click event with `$('.photo').click()`. Use `delegate` or `on` instead. These are well documented by jQuery. – Paul Fleming Sep 08 '13 at 10:42
@FarzadBayan I'm not going to write the full solution for you. Do you have JS programming experience? If `num` hits the limit, hide the "more" button. – Paul Fleming Sep 08 '13 at 10:42
@FarzadBayan P.S. Welcome to stack overflow. If you have follow-up questions, feel free to raise them as new questions. These comment threads pay no value to anyone. If this has helped to solve your problem, please upvote. If this is the best answer, please mark it as correct. – Paul Fleming Sep 08 '13 at 10:44
Sure, Thanks. I use `$("a.photo").fancybox()` – Farzad Bayan Sep 08 '13 at 10:45
There are lots of solutions on Google. Here's the top result I came across: http://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element – Paul Fleming Sep 08 '13 at 10:47

Create a button in order to add a group of photos to a gallery

3 Answers3