Simple gallery

[drilonb]

I like to share Simple gallery in ProccesWire

i use for popup  ( rel='lightbox' )  lightbox.js

CSS for gallery

.gallery li {
       list-style: none;
       float: left;
       margin: 0 20px 3px 0;
}

.gallery {
   display: block;
   padding-left: 1px;
   padding-top: 1px;
}

#dropshadow { 
           border: 5px solid;
   border-color:white;
-moz-box-shadow: 4px 4px 9px #000000;; /* Firefox */ 
-webkit-box-shadow: 4px 4px 9px #000; /* Safari/Chrome */ 
box-shadow: 4px 4px 9px #000; /* Opera and other CSS3 supporting browsers */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000')";/* IE 8 */ 
: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000');/* IE 5.5 - 7 */  
} 

and in your template u will put like this,   PS. images is fields

<ul class="gallery">	
<?php
       foreach($page->images as $img) {
$t = $img->size(140, 100); 
echo "<li><a href='{$img->url}' rel='lightbox' ><img id='dropshadow' src='{$t->url}' alt='{$t->description}' width='{$t->width}' height='{$t->height}' /></a></li>";
}?>
</ul>

example is in attach,

this is not so good but for beginner maybe will help,

[ryan]

Looks great! Thanks for posting this example.

[Giovanni]

Hi, I'm new to PW and php, but I believe the solution to my question may be similar to this thread. I will appreciate the help.

1. Is it possible to use child pages as photo albums and link them to the parent page where the first image is displayed as a thumb.

2. The child pages have the field "album_description", that i would like to display below the thumb.

3. Then to call lightbox when the album thumb is selected to display the pictures as an album.

[ryan]

Giovanni,

This is possible. The examples below are simple examples that exclude the container markup (like header/footer, etc.) but focus on just the parts you are asking about. Your main album index page would use template code something like this:

/site/templates/album-list.php

<ul class='albums'>
<?php

foreach($page->children() as $album) {

    // assumes your field with images is named 'images'
    if(!count($album->images)) continue; // skip if no images

    $image = $album->images->first(); // get the first image
    $thumb = $image->width(150); // make a thumbnail 150px wide

    echo "<li style='width: 150px; float: left; margin: 10px;'>"; // use stylesheet instead of inline styles
    echo "<a href='{$album->url}'><img src='{$thumb->url}' alt='' /></a><br />";
    echo $album->album_description; 
    echo "</li>";    
}

?>
</ul>
<br style='clear: both;' />

Then your template that is used for each of the album pages would look something like this:

/site/templates/album.php

<h1><?=$page->title?></h1>
<h2><?=$page->album_description?></h2>
<ul class='images'>
<?php

foreach($page->images as $image) {
    $thumb = $image->size(100, 100); // specify your own width/height
    echo "<li style='width:100px; height:100px; float:left; margin:5px;'>"; // better to use a stylesheet 
    echo "<a href='{$image->url}' class='lightbox' rel='gallery'>";
    echo "<img src='{$thumb->url}' alt='{$thumb->description}' /></a>";
    echo "</li>"; 
}

?>
</ul>
<br style='clear: both;' />

The details of how this loads into your lightbox script will depend on what lightbox script you are using. I have used jQuery Fancybox most recently, which requires a class attribute on the <a> tag containing the image ("lightbox" used in the example above), and a common "rel" attribute on that tag that relates it to the other images in the gallery ("gallery" used in the example above). The point of the "rel" attribute is so that you can have next/prev buttons in the lightbox.

[drilonb]

simple http://gjelbert.com/album-list/  shows gallery in pop up with fancybox

thanks to Ryan.

[ryan]

Well done, that's a very good example of loading the thumbnails in the lightbox... A nice variation.

[Giovanni]

much thanks ryan, this is exactly what i'm looking for! Awesome!

[apeisa]

Hmm.. I think I have seen those four images somewhere before..?

Looking good (despite the images)!