Picture Gallery

Thanks, Dave.

By the way, now that I have the gallery up and running, it is possible to set this up so that the client can create new galleries in this style? e.g. a gallery for a specific event or on a particular subject. There would be an index page that links to the various individual galleries, each of which would work like this one: http://www.carv.ca/galleryPage.php

Cheers,

Hi Nigel,

Yes. If you're not paging through uploads you can have one record for each "Gallery". Then your list page will list the galleries and your detail page will show the images.

Let me know if that works for you.

H Nigel,

Right, so it could be a section called "Galleries" and they could click "Add Record" to add a gallery. And a record would have a "Gallery Name" field and an upload field where they could upload multiple images.

Then you'd have a list viewer to list the galleries and a detail viewer to show the images.

Feel free to email me direct at dave@interactivetools.com if you want to show me hwo you have it setup now.

Hope that helps!

Hi, Dave.

This is a new job I'll be starting this week (the yoga site we discussed before Christmas). I just used another client's gallery as an example, although that one won't have subsections.

I'll probably be in touch sometime next week!

Thanks,

I've checked the link on this post - re the instructions on how to add a gallery using either lightbox, lytebox, etc - but none of the links remain active.

What I am trying to active is a lytebox or lightbox effect whereby the clients can simply upload a pile of images and they display in a gallery similar to this http://www.focus10.com.au/photography_courses.php?1 (click on the "take a look at the gallery). However, this way is cumbersome for the client as they need to enter the name of the image for each, whereas it'd be great if they can just use the image upload and it creates it automatically.

Any previous or new instructions would be great. This is the code used to create the above:

<td valign="top">
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_1'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"><img border="0" src="images/course_photos.jpg" width="184" height="120"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_2'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_3'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_4'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_5'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_6'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_7'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_8'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_9'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_10'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_11'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_12'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_13'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_14'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_15'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_16'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_17'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_18'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_19'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_20'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_21'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_22'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_23'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_24'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
<a href="/cmsAdmin/uploads/<?php echo $photography_coursesRecord['gallery_image_25'] ?>" rel="lyteshow[]" title="<?php echo $photography_coursesRecord['gallery_title'] ?>"></a>
</td>

Hi,

This is how I would create an image lightbox, this tutorial is based on CMS Builder 2.17, although it should be compatible with older versions as well. It's based on this plugin:

http://leandrovieira.com/projects/jquery/lightbox/

In CMS Builder I would create a single record section by going to the Section Editor menu in CMS Builder and clicking the 'Add new editor....' button in the bottom right hand corner. In the add new editor box I would select a single record as the type, In my example I named it gallery.

Next I would modify the new gallery section and add an upload field by clicking the 'Add Field' button in the bottom right hand corner of the modify section editor. Give the field a name (in my example I used gallery again), and select upload as the field type. As you might want to use more than 25 images ensure that the Maximum uploads field is unchecked. (See field.png)

Next Add content to the gallery section. You can upload as many images as you would like, and can select multiple images to be uploaded at the same time. In this example the title will be displayed in the lightbox (see field2.png). Once images are saved you can reorder them by dragging the images up and down the gallery upload field.

This is the code I used to display the gallery content on the page:

<?php



// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('C:/wamp/www/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load record from 'gallery'
list($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
'where' => "`num` = '1'",
'loadUploads' => true,
'allowSearch' => false,
'limit' => '1',
));
$gallery = @$galleryRecords[0]; // get first record
if (!$gallery) { dieWith404("Record not found!"); } // show error message if no record found


?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />

<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">

#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>

<body>
<!-- general page content -->
<h2 id="example"><?php echo $gallery['title']; ?></h2>
<p><?php echo $gallery['content']; ?></p>
<!--check for image array -->
<?php if($gallery['gallery']): ?>
<div id="gallery">
<ul>
<!-- foreach image the array create a variable called row -->
<?php foreach($gallery['gallery'] as $key => $row): ?>
<li>
<a href="<?php echo $row['urlPath']; ?>" title="<?php echo $row['info1']; ?>" >
<img src="<?php echo $row['thumbUrlPath']; ?>" width="72" height="72" alt="" />
</a>
</li>
<?php endforeach?>
<li>
</ul>
</div>
<?php endif;?>
</body>
</html>

The foreach loop at the bottom will cycle through all of the uploaded images in the order they are in the upload list. $row['info1'] contains the title, $row['urlPath'] and $row['thumbUrlPath'] contain the URL path to the image uploaded and the thumbnail that is generated by CMS Builder. Field3.png shows what the finished lightbox looked like.

Let me know if you would like me to clarify anything!

Thanks

Perfect, that works. Thank you. Best instructions too!! (except that you need to change the $dirsToCheck = array to match your own :)!

Two questions:

1) would it be possible to launch the gallery so that it only launches from ONE image and has the slide show linked from that one image? For example, like this one http://www.focus10.com.au/photography_courses.php?1 (click on "take a look at the course photos")

2) Is it possible to add multiple galleries on a single page? Is that possible?

Hi,

Both of these should be fairly straightforward.

1)I've adapted the code to launch by clicking on an image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />

<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
//Create the slideshow.
$('#gallery a').lightBox();
//If the zoomButton ID is clicked...
$('#zoomButton').click(function(){
//create a click event on the first link in the hidden gallery id, which will launch the slideshow.
$('#gallery a:first').click();
});
});
</script>
<style type="text/css">

#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>

<body>
<!-- general page content -->
<h2 id="example"><?php echo $gallery['title']; ?></h2>
<p><?php echo $gallery['content']; ?></p>
<!--check for image array -->
<?php if($gallery['gallery']): ?>
<!-- This section isn't visible to the user, but lightBox function will be able to generate the lightbox using it, and it will still preload the images. -->
<div style="display:none;" id="gallery">
<ul>
<!-- foreach image the array create a variable called row -->
<?php foreach($gallery['gallery'] as $key => $row): ?>
<li>
<a href="<?php echo $row['urlPath']; ?>" title="<?php echo $row['info1']; ?>" >
<img src="<?php echo $row['thumbUrlPath']; ?>" width="72" height="72" alt="" />
</a>
</li>
<?php endforeach?>
<li>
</ul>
</div>
<?php endif;?>
<?php if($image = $gallery['gallery'][0]): ?>
<!-- If the link with an id of zoomButton is clicked this will laumch the slideshow. -->
<a id="zoomButton" href="#"><img src="<?php echo $image['urlPath']; ?>" alt="<?php echo $image['info1']; ?>" /></a>
<?php endif; ?>
</html>

2) This should be possible, although you'll need to create a lightBox object and click event for each individual light Box:

<script type="text/javascript">
$(function() {
//Create the slideshow.
$('#gallery a').lightBox();
//If the zoomButton ID is clicked...
$('#zoomButton').click(function(){
//create a click event on the first link in the hidden gallery id, which will launch the slideshow.
$('#gallery a:first').click();
});

$('#gallery2 a').lightBox();
//If the zoomButton ID is clicked...
$('#zoomButton2').click(function(){
//create a click event on the first link in the hidden gallery id, which will launch the slideshow.
$('#gallery2 a:first').click();
});
$('#gallery3 a').lightBox();
//If the zoomButton ID is clicked...
$('#zoomButton3').click(function(){
//create a click event on the first link in the hidden gallery id, which will launch the slideshow.
$('#gallery3 a:first').click();
});
});
</script>

You would also need to duplicate each slide show button and each gallery div and change the names of the zoomButton and Gallery ID for each.

Thanks!