Using thumbs & images in a gallery

Hi,

I use the following "for each" to create the gallery on my site -

I have a single div formatted on the CSS sheet called "gallery" and each thumbnail opens with lightbox effect..

The images are uploads

<?php foreach ($breedings_2013Records as $record): ?>
    
    <div class="gallery"><?php foreach ($record['content'] as $index => $upload): ?>
        <a href="<?php echo $upload['urlPath'] ?>"rel="lightbox"title="<?php echo htmlencode($upload['info1']) ?>">
        <img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="<?php echo htmlencode($upload['info1']) ?>" title="<?php echo htmlencode($upload['info1']) ?>" />
        </a>
   <?php echo htmlencode($record['title']) ?>
        <?php endforeach ?></div>
     <?php endforeach ?>

Hope this helps

Andy

Hi degreesnorth,

If I understand what you're looking for, here's a set of recipes from my CMSB Cookbook http://www.thecmsbcookbook.com that might help get you started. There are other recipes that address fancybox and other viewer implementations in the Cookbook as well.

Hope they help,

Jerry Kornbluth

INTEGRATING LIGHTBOX WITH CMSB - Updated Aug 3rd, 2010

Here’s the basic code that lightbox requires:
_____ code ________________________________________________

<?xml version="1.0" encoding="UTF-8" ?>
<gallery>
<album lgPath="album1/images/" tnPath="album1/thumb/" title="Album title" description="Album description" tn="album1/preview.jpg">
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
<img src="1.jpg" title="" caption="" link="" target="_blank" pause="" />
</album>
</gallery>

__________________________________________________________

Where:

_____ code ________________________________________________

lgPath = path to the large version of the photos
tnPath = path to the thumbnails (or preview photo in case of video)
caption = this would show on mouseover of the image
link = if the image is clicked it would follow this link

__________________________________________________________

The one thing CMS Builder doesn't do is put it's thumbnails in a different directory. It puts them in the same directory and adds a _thumb
extension. I've just used the main upload dir for both lgPath and tnPath.

Here's some code for a page viewer. Ideally you'd have a list viewer that would list albums and then you'd click through to this one to
display an album. You could also direct link to a specific album. This one assumes you have some fields defined called: title, and
description. Also you'll need to change the Table name and the require_once path to match your server.

_____ code ________________________________________________

<?PHP echo "<?xml version='1.0' encoding='UTF-8'?>\n";
require_once "../lib/viewer_functions.php";
$options = array(); $options['Table name'] = 'news';
$options['recordNum'] = '';
$options['where'] = '';
$record = getRecord($options);
?>
<gallery>
<album lgPath="<?PHP echo $SETTINGS['uploadUrl']; ?>
tnPath="<?PHP echo $SETTINGS['uploadUrl']; ?>"
title="<?PHP echo htmlspecialchars($record['title']); ?>"
description="<?PHP echo htmlspecialchars($record['description']); ?>" tn="album1/preview.jpg">

<?PHP if ($record): ?>
<?PHP foreach (getUploads($options['Table name'], 'uploads', $record['num']) as $upload): ?>
<img src="<?PHP echo htmlspecialchars($upload['filename']); ?>"
title="<?PHP echo htmlspecialchars($upload['info1']); ?>"
caption="<?PHP echo htmlspecialchars($upload['info2']); ?>"
link="<?PHP echo $upload['urlPath'] ?>"
target="_blank"
pause="" />
<?PHP endforeach ?>
<?PHP endif ?>
</album>
</gallery>


SETTING UP LIGHTBOX OR MILKBOX TO SHOW IMAGES ON A DETAIL PAGE - Updated Feb 27th, 2012

Revised for Milkbox version 3.0.3 http://reghellin.com/milkbox/
This new version works with IE 9 and keeps the titles from popping up as as tooltips when you rollover the thumbnails.
It also automatically re-sizes image to fit the browser window

The first thing that you’ll need to set up is a multi record editor with a single upload field and some text fields for the information
required for both the list page and details page. Mine was called “people”. I also wanted to display the thumbnails in rows of 7 columns
each that automatically extended to accommodate additional images.

On my list page there were the normal references to the Mootools and Milkbox files in the folder milkbox3.0.3.

_____ code ________________________________________________

<script src="milkbox3.0.3/js/mootools-core.js"></script>
<script src="milkbox3.0.3/js/mootools-more.js"></script>
<script src="milkbox3.0.3/js/milkbox-yc.js"></script>
<link rel="stylesheet" href="milkbox3.0.3/css/default.css" />
<link rel="stylesheet" href="milkbox3.0.3/css/main.css" />
<link rel="stylesheet" href="milkbox3.0.3/css/milkbox/milkbox.css.php" />
__________________________________________________________

In the body, If there was a title, I included a link to a detail page in the title that appears on the full sized image page that comes up
after you click on the thumbnail.

You can’t use actual "quotes ( " ) within the title code, but you can use the HTML entity &quot; in it’s place. With that little fix,
the titles are clickable and lead you to a detail page for that image.

_____ code ________________________________________________


<table border="0" id="gallery" cellspacing="0" cellpadding="10" align="center">
<tr valign="middle">
<?php foreach (peopleRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align="center" valign="middle" style="border: 1px solid #ffffff" width="15%">
<div align="center">

<a href="<?php echo $upload['thumbUrlPath3'] ?>"data-milkbox="milkbox:g1" title="
<?php if ($record['title']): ?><a href=&quot;#&quot;><h2><?php echo $record['title'] ?><br /><?php echo $record['sub_title'] ?></h2></a><br
/><?php endif ?>

<?php if (!$record['title']): ?><a href=&quot;<?php echo $record['_link'] ?>&quot;><h2>Click for more.</h2></a><?php endif ?>

<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight']?>"
/></a>

</div></td>
<?php $maxCols=7; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?>
<?php endforeach ?>
</tr>
</table>
__________________________________________________________
You can use other “if” statements to set the types of caption that appears and combinations of them on the details page to show PayPal
information if there’s a price entered for the item.

In main.css you'll find the values for:

Title Height and Color Properties
Thumbnail Border Size and Color Properties

To left justify the title text in Firefox 6, I added the following code to the h1, h2 properties in main.css:
_____ code ________________________________________________

alignment-adjust:auto;
__________________________________________________________

NOTE: To make the enlarged image overlay on a blank or black page, at bottom of page, in the domready function, make sure that
overlayOpacity:1 is included.

If there are other options, add that separated by a comma.

window.addEvent('domready', function(){
milkbox = new Milkbox({ centered:true, overlayOpacity:1 });

__________________________________________________________

NOTE: if you're going to change the enlarged image background color from white to something else (the property is in the
milkbox/css/milkbox.css.php file under #mbox-mainbox) you'll need to make the white background of the gifs transparent.

I've done that for play-pause.gif close.gif, prev.gif and next.gif and you can download them here

_____ url _ ________________________________________________

http://www.thecmsbcookbook/downloads/milkbox_gifs.zip
__________________________________________________________

Hi, 

Would it be possible to post or attach your current code for me?

I think you need to use a getRecords function to retrieve all of your gallery records, and then cycle through them using two foreach loops as suggested by  Rewmer.

Thanks!

Greg

Hi Greg

Just checking to see whether you've had a chance to look at this?  It's getting rather urgent.

Thanks

in the generated code for the img srcs, it is showing "//uploads/...", when it should say "/cmsAdmin/uploads/..."

I believe this is the result of incorrect setting in your cms. 

If you go to Admin > General Settings, what do you have in the boxes for Upload Directory and for Upload folder URL?

Hi degreesnorth,

I spent a while trying to fiddle with the JavaScript to try to get fancygallery to run on your HTML, but I wasn't able to get accomplish anything of note. There are two JavaScript errors coming up for me in Chrome's Developer Tools which could be masking a problem.

I'm afraid we can't debug third-party JavaScript libraries as part of our free support.

I suggest you try tackling this problem in two stages: first, try getting a gallery working using the same lightbox that Rewmer and gkornbluth are using and make sure you don't have any JavaScript errors on the page. Many more community members will be able to help you debug your site if you use more-standard JavaScript libraries.

Once you've got that working, switch over to use your preferred lightbox (i.e. fancygallery).

I hope this helps!