Picture Gallery https://interactivetools.com/forum/forum-posts.php?Picture-Gallery-68589 Wed, 19 Aug 2026 07:38:43 -0700 en-us Re: [degreesnorth] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2218439#post2218439
In the Gallery file:

$isGalleryPage = true;
include('include_header.php');

include_header.php file:

<?php if(@$isGalleryPage ): ?>

<!-- Code to only appear on gallery page goes here -->

<?php endif; ?>

Could you give me a bit more clarification on the second point?

Thanks
]]> Fri, 09 Nov 2012 13:44:16 -0800 forum-posts.php?postNum=2218439#post2218439 Re: [greg] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2218429#post2218429
The script works fine on it's own, but as soon as I plug it into a layout with other code, it gets stuff up.

Two problems. Because I am using a include_header.php, I need to add the script in the header which is then more intensive for all pages (unless it doesn't matter??)

But when I get to the page itself, it's hiding behind - see http://owow1356.staging-cloud.netregistry.net/gallerynew.php

Any other suggestions?

Thanks

Carole
]]> Thu, 08 Nov 2012 23:00:25 -0800 forum-posts.php?postNum=2218429#post2218429 Re: [degreesnorth] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2218363#post2218363
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!
]]> Thu, 01 Nov 2012 11:54:20 -0700 forum-posts.php?postNum=2218363#post2218363 Re: [greg] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2218358#post2218358
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?
]]> Wed, 31 Oct 2012 16:47:13 -0700 forum-posts.php?postNum=2218358#post2218358 Re: [degreesnorth] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2218355#post2218355
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
]]> Wed, 31 Oct 2012 12:33:22 -0700 forum-posts.php?postNum=2218355#post2218355 Re: [Donna] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2218350#post2218350
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>
]]> Tue, 30 Oct 2012 23:52:42 -0700 forum-posts.php?postNum=2218350#post2218350 Re: [Dave] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195417#post2195417
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,
]]> Mon, 26 Jan 2009 16:23:33 -0800 forum-posts.php?postNum=2195417#post2195417 Re: [NigelGordijk] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195412#post2195412
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!
]]> Mon, 26 Jan 2009 16:14:57 -0800 forum-posts.php?postNum=2195412#post2195412 Re: [Dave] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195407#post2195407
Do you mean that I would have to set up the galleries in advance, then the client would be able to add photos to them?

What I'm actually looking for is a way to let the client create new galleries themselves, using a CMS Builder template created by me.
]]> Mon, 26 Jan 2009 16:01:46 -0800 forum-posts.php?postNum=2195407#post2195407 Re: [NigelGordijk] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195400#post2195400
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.
]]> Mon, 26 Jan 2009 15:40:32 -0800 forum-posts.php?postNum=2195400#post2195400 Re: [Dave] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195379#post2195379
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,
]]> Fri, 23 Jan 2009 15:32:28 -0800 forum-posts.php?postNum=2195379#post2195379 Re: [chassa2556] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195372#post2195372
There's no automated way to page through images from a single record without writing a bunch of custom code. The simplest way to achieve this is to set your upload field to only allow 1 upload and create a new record for each upload.

Then you can use the standard record paging features.

Hope that helps!
]]> Fri, 23 Jan 2009 15:03:19 -0800 forum-posts.php?postNum=2195372#post2195372 Re: [NigelGordijk] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195371#post2195371
>Is there a way to reorder the photos in CMS Builder
>once they've already been added to the system?

Yes, we added this some time ago with drag sorting for uploads. If you upgrade that feature should become available.

Same thing with the upload window size. I think we doubled the size.

Hope that helps!
]]> Fri, 23 Jan 2009 15:01:59 -0800 forum-posts.php?postNum=2195371#post2195371 Re: [NigelGordijk] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195365#post2195365
I wonder if I could jump in on this one. I want to to gallery where there is a limit to the amount of pictures to the gallery and then it goes to a next page. I've run the next page listing script but it doesn't seem to work. Any ideas I don't know whether it's Lightbox messing it up. I simply want two galleries in two different records with a previous and next link at the bottom of the page linking to them. Any ideas??
]]> Fri, 23 Jan 2009 13:40:24 -0800 forum-posts.php?postNum=2195365#post2195365 Re: [Donna] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2195364#post2195364
I've set up CMS Builder with Lightbox 2 and it's all working perfectly (thanks to your article!). I'm using an early version of the software - 1.04.

Is there a way to reorder the photos in CMS Builder once they've already been added to the system?

Also, when I look at all of the photos that are in the system they appear in a small scrolling window in CMS Builder. Is there a way to make the window bigger so that you can see more of the images? This is in CMS Builder, not on my Web page: http://www.carv.ca/galleryPage.php

Thanks!
]]> Fri, 23 Jan 2009 12:55:00 -0800 forum-posts.php?postNum=2195364#post2195364 Re: [ChrisTitchenal] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190161#post2190161
Yes, you can setup specific fields for image uploads -- I created one for the "Title" (which is the only thing Lightbox needs extra) and added the code into the CMS Builder generated code, and voila. Probably took about 2 minutes in total to setup. :)
]]> Thu, 14 Feb 2008 15:49:24 -0800 forum-posts.php?postNum=2190161#post2190161 Re: [Donna] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190159#post2190159
Chris
]]> Thu, 14 Feb 2008 15:37:10 -0800 forum-posts.php?postNum=2190159#post2190159 Re: [ChrisTitchenal] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190147#post2190147
To do that, take a look at your image gallery code -- you've probably got a <br> at the end of each <img> tag. Remove that, and it'll keep them on one line (automatically spilling over at the end of each line.)

Take a look at the article I wrote for our latest newsletter -- it includes some detail about how I made an image gallery (using a free script to spice it up a little as well):

http://www.interactivetools.com/news/issue0073.html#2

I hope this helps. :)
]]> Wed, 13 Feb 2008 19:33:33 -0800 forum-posts.php?postNum=2190147#post2190147 Re: [virgodesign] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190126#post2190126 I am sure that is what you ment for me to do in the first place, but as you can tell php and following instructions is not a strong point.



Thanks dave,
now if I can just style up a nice gallery instead of them all just going down a row



Chris
]]> Tue, 12 Feb 2008 16:45:03 -0800 forum-posts.php?postNum=2190126#post2190126 Re: [Dave] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190117#post2190117
Indeed it would, picture resizing and optimization then is not an issue.

The drag and drop feature is nice to... I will have to buy my own copy of CMS Builder and play around with it myself. (Can't use client's sites for testing) It looks like a great interface for all kinds of solutions.

Avrom
]]> Tue, 12 Feb 2008 00:20:08 -0800 forum-posts.php?postNum=2190117#post2190117 Re: [virgodesign] Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190116#post2190116
Yes you could. I'm thinking the simplest way to do that would be to have a section called "Galleries" with 2 fields "title" and "uploads". Then your "list viewer" would show all the gallery titles and your "page viewer" would show all the pictures for that gallery.

It could also be done other ways if needed.

It resizes uploaded images only if necessary and uses a default quality setting of 75 for jpegs, but that can be adjusted if needed.

Let me know if you have any more questions on that or if there's anything else I can do to help.
]]> Mon, 11 Feb 2008 20:58:20 -0800 forum-posts.php?postNum=2190116#post2190116 Picture Gallery https://interactivetools.com/forum/forum-posts.php?postNum=2190115#post2190115
Know your busy, so sorry for the extra post. I have a client that requires CMS as well as a picture gallery. I am wondering if I can just do a picture gallery with CMS Builder ? as long as pics can be reordered and deleted... galleries added etc. Does it also optimize uploaded pics or just reduce the physical size of them ?

Thanks Dave
Avrom
]]> Mon, 11 Feb 2008 19:25:49 -0800 forum-posts.php?postNum=2190115#post2190115