Forums

Konnor

So I'm getting to a point on my website where I would like to add an image gallery.

My knowledge at the moment only stretches as far as adding each individual image to an and styling it in CSS. I know this is hugely inefficient.

I can see there are numerous ways to do it - php, javascript, jQuery but without knowledge of any of these I'm getting bogged down with where to start. There are also lots of pre-created sliders, galleries etc but I want to retain the ability to style it.

Can anyone point me in the right direction?

Thanks!

elneco

shadowbox is a easy jquery plug in to mess with: http://www.shadowbox-js.com/

Konnor

Thanks for that, although I'm specifically struggling to get my head round how you go 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 'cleaner' markup that loops through, so you can dump additional images into a folder and it just picks them up.

Ta

kgscott284

Try this, it is as simple as it will get for your current skill set, read it well, you will learn alot...

http://www.jdmweb.com/resources/imgallery

Konnor

Thanks kg, looks reasonable. Have you used this before?

I'm having some issues with the images actually displaying and can't for the life of me figure out what's wrong.

This is what I have in my test page....

<!DOCTYPE html>
<html lang="en">

<head>
    
    <meta charset="UTF-8" />
    <title>Sample page</title>

    <?php include("imgallery.php"); ?>
    
    <!-- Include CSS -->
    <link rel="stylesheet" type="text/css" href="CSS/lightbox.css" />
    <link rel="stylesheet" type="text/css" href="CSS/imgallery.css" />

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.lightbox.js"></script>
    <script type="text/javascript" src="imgallery.js"></script>
    
</head>

<body>

<?php ImgGallery::getPublicSide(); ?>

</body>

</html>

- Downloaded Lightbox plugin
- Downloaded Jquery
- Downloaded the files in the example
- Made sure the file names were all correct and in the right folder structure.

Directory list

...and just get a completely blank page

If I purposely put the wrong folder path in imgallery.php, I do see the correct formatting....

public function __construct(
  	$thumbsize=96, //Change this to match your thumbnail size
  	$maxsize=640, //Change this to match your maximum image size
  	$folderpath="./pictures", //Change this to match your folder path
  	$elements=array()
  )

http://img860.imageshack.us/img860/8693/imgallery.png

I try adjusting $folderpath="./imgallery/pictures" and I get a blank page.

Much hair has been shed so far...

_devin

Any luck with this?
I'm stuck on the blank page as well.

treehouse : what would you like to learn today?

Forums

Where to start with a simple image gallery