1

I have been using the Freewall jQuery plugin in order to generate a responsive grid-based image gallery. Such a piece of work, I have to say. However, I have been struggling to find a way to make the pictures linkable, given that the images of the gallery are retrieved in an automated manner:

<script type="text/javascript">

        var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'></div>";
        var w = 280, h = 320, html = '', limitItem = 15;
        for (var i = 0; i < limitItem; ++i) {
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 280,
            cellH: 320,
            onResize: function() {
                wall.refresh();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
    </script>

In other versions of the code, Minh has placed the code of every single picture of the gallery in the html file. What I find particularly useful is the automated retrieval of the JS code and I would like to know... Is there an automated way of associating each of the pictures to a certain link, thus making the pictures linkable?

That would be: 1 to A, 2 to B, 3 to C and so on.

djur
  • 304
  • 2
  • 13

2 Answers2

2

Not 100% sure what you would like to see but perhaps you could do something like this (trying to keep it the same way you've been doing it) : 

<script type="text/javascript">
        var links = ["A.html", "B.html", "C.html"];
        var titles = ["titleA", "titleB", "titleC"];
        var temp = "<a href='{link}' ><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'><div class='showOnHover'>{title}</div></div></a>";
        var w = 280, h = 320, html = '', limitItem = 15;
        for (var i = 0; i < limitItem; ++i) {
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[i]).replace("{title}", titles[i]);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 280,
            cellH: 320,
            onResize: function() {
                wall.refresh();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
    </script>
Gabriel
  • 327
  • 4
  • 13
  • The system retrieves the images using the i+1 parameter. I want every image to be linkable, which, as I understand it, should be done associating every element of the array of images to an array of html files, just as you did in your code. However, I am unable to make your code work. There is some syntax missing, I think. I have uploaded the whole Javascript code on the original post. Hope it helps! ;) – djur Mar 28 '14 at 11:24
  • You pretty much understood what I was trying to do, however not too sure what's wrong with the current syntax. I'll check again. Also, what are you trying to link the images to ? (just to give me an idea) – Gabriel Mar 28 '14 at 11:35
  • Simply put, each image will take the user to a new html page. I understand this must be also automated so that the code always makes i+1 correspond to A.html, i+2 to B.html and i+3 to C.html. Thanks for the help, btw it is much appreciated! – djur Mar 28 '14 at 11:49
  • I tested this and it works rather well, edited my answer to include all your code so it's easier for you to test it. Note that arrays start at 0 and not at 1 so A.html corresponds to links[0] so we should not do i+1 to get the first one. – Gabriel Mar 28 '14 at 11:55
  • Great ! Pretty cool library by the way, might use it too later :) – Gabriel Mar 28 '14 at 11:59
  • It is indeed really comprehensive. One more thing, though @Gabriel... Would it be possible to add some text when hovering over the different images? Following the same logic, it should be an array of text strings specified under a different var. Do you reckon this would be hard to achieve? Like, linking back to the CSS and everything... – djur Mar 28 '14 at 12:10
  • Yeah you can have the title='{title}' attribute on your div or on the a. You could have an array for those values and do exactly like the links – Gabriel Mar 28 '14 at 12:40
  • I understand what you say but I am not sure I know howt – djur Mar 28 '14 at 13:09
  • 1
    Changed my answer, hope this helps – Gabriel Mar 28 '14 at 13:14
  • Ohh good. You are only missing to add title='{title}' in (or in the
    )
     – Gabriel Mar 28 '14 at 13:17
  • Thanks! ;) What I am looking for is somewhat different, though. I am trying to put a block of text over the image that will only reveal on hover. I want to have some editing possibilities here, so that they all look the same but a different string of text is applied to each image as the array goes on. – djur Mar 28 '14 at 17:17
  • I quoted you on the conversation with the author of the code, just in case you want to follow along or give me ha hand here. – djur Mar 28 '14 at 17:19
  • Ohh there are many ways you can do this, CSS is your friend here. A bit too complicated to explain in a comment but take a look at this : http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css – Gabriel Mar 28 '14 at 17:19
  • Oh cool. This is kind of what I am looking for. Do you think I can relate it to the JS function so that every time an element of the array is hovered over a different string of text will appear? – djur Mar 28 '14 at 17:33
  • Yes, I edited my answer to show you how to do it. It's actually like before but I added a
    inside the one with the image, you would only need to create the appropriate CSS
     – Gabriel Mar 28 '14 at 17:45
  • I am trying to learn some Javascript coding but it does take a while to digest. Even for some simple syntax like this. You have been really helpful. Thanks again. – djur Mar 28 '14 at 17:59
0

Please using this

var links = ["A.html", "B.html", "C.html"];
        var titles = ["titleA", "titleB", "titleC"];
        var temp = "<a href='{link}' title='{title}'><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'></div></a>";
        var w = 280, h = 320, html = '', limitItem = 15;
        var index = 0;
        for (var i = 0; i < limitItem; ++i) {
            index = i % 3;
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[index]).replace("{title}", titles[index]);
        }
        $("#freewall").html(html);

follow the variable index

Minh Nguyen
  • 90
  • 4
  • Hey, thanks for your answer @mihn-nguyen! I am more looking for an array of strings of text that would _overlap_ the image, just as you are doing on other versions of the code, such as in http://goo.gl/jy1sCe. I want to have a text field over the image that will change as specified as the array goes on. What @gabriel and you suggested is a response that is activated with the cursor hovering over the image. I would not have much editing control over this. I want the text to appear only when the cursor hovers over the images, but as text contained in a
    or some other element.
     – djur Mar 28 '14 at 17:12