Jump to content


Photo

Javascript image gallery tutorials


  • Please log in to reply
1 reply to this topic

#1 Konnor

Konnor

    Forum Newcomer

  • Members
  • Pip
  • 39 posts

Posted 13 April 2012 - 08:05 AM

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!


#2 andy9l

andy9l

    White space enthusiast

  • Moderators
  • PipPipPipPipPip
  • 2,600 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 13 April 2012 - 08:36 AM

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.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users