1 reply to this topic

[Konnor]

Hi all,

I'm looking to implement an image gallery on my website, with something like Lightbox or Shadowbox but am a complete beginner.

My intention was keep my markup clean by looping/pulling through every image in a folder.

So going from this....

<ul class="gallery">

    <a href="img/photo01.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo01.jpg" alt="description" /></li>
    </a>
    <a href="img/photo02.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo02.jpg" alt="description" /></li>
    </a>
    <a href="img/photo03.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo03.jpg" alt="description" /></li>
    </a>
    <a href="img/photo04.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo04.jpg" alt="description" /></li>
    </a>
    <a href="img/photo05.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo05.jpg" alt="description" /></li>
    </a>
    <a href="img/photo06.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo06.jpg" alt="description" /></li>
    </a>
    <a href="img/photo07.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo07.jpg" alt="description" /></li>
    </a>
    <a href="img/photo08.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo08.jpg" alt="description" /></li>
    </a>
    <a href="img/photo09.jpg" rel="lightbox[gallery]">
     <li><img src="img/photo09.jpg" alt="description" /></li>
    </a>

</ul>

To something cleaner using JavaScript that loops through. So you can easily add additional images to a folder without changing the markup.

I am a beginner to javascript, having just followed a few tutorials, but don't know where to start with this sort of thing.

Any tutorials out there?

Ta!

[andy9l]

What you want to do isn't possible with Javascript alone. You'd need a server-side script code snippet, which would essentially create the above markup in a loop. In PHP, it would look something like:

(Untested, just whipped up):

<?
define('IMAGE_FOLDER', '/images/gallery');
foreach(scandir($_SERVER['DOCUMENT_ROOT'].IMAGE_FOLDER) as $img){
  echo '<a href="$img" rel="lightbox[gallery]">
          <li><img src="$img" alt="Gallery image" /></li>
        </a>';
}

//Insert jQuery gallery plugin code/include here, or wait for document.ready()

That would not be great for SEO, same alt tag per loop, but you could do something clever with the file names to resolve that.

Edited by andyl, 13 April 2012 - 08:38 AM.