column & lightbox list on album
4 posts by 3 authors in: Forums > CMS Builder
Last Post: December 15, 2011 (RSS)
By jacgo - December 15, 2011
Hi, dear all
This is my album [url "http://www.rscf.org.tw/site/albumDetail.php?3-3"]http://www.rscf.org.tw/site/albumDetail.php?3-3[/#0066cc][/url]
There are 8 pics in my albumDetail.php page.
Some questions:
1) How can I list it with 4 column 4 row?
2) I would like to use lightbox http://www.huddletogether.com/projects/lightbox2/ in my albumDetail page.
when user clike one of pic. they can click next and prious botton in lightbox.
I am poor skill in CMS Builder...Hope some one help.
Thanks!
Jacgo
This is my album [url "http://www.rscf.org.tw/site/albumDetail.php?3-3"]http://www.rscf.org.tw/site/albumDetail.php?3-3[/#0066cc][/url]
There are 8 pics in my albumDetail.php page.
Some questions:
1) How can I list it with 4 column 4 row?
2) I would like to use lightbox http://www.huddletogether.com/projects/lightbox2/ in my albumDetail page.
when user clike one of pic. they can click next and prious botton in lightbox.
I am poor skill in CMS Builder...Hope some one help.
Thanks!
Jacgo
Re: [jacgo] column & lightbox list on album
Hi Jacgo,
Two good questions and both easy to implement with CMS Builder.
There are a number of specific recipes in my CMSB Cookbook [utl]http://www.thecmsbcookbook.com[/url] that address both of of your questions and offer some variations on the theme.
To limit the amount of images on the page to 16 you can use this concept which counts the number of image records that are displayed by the foreach loop and when the number is greater than 15 the "break" stops the loop:
<?php $count = 0; ?>
<?php foreach ($record['gallery_images'] as $upload): ?>
<img src="<?PHP echo $upload['thumbUrlPath'] ?>" width="<?PHP echo $upload['thumbWidth'] ?>" height="<?PHP echo $upload['thumbHeight'] ?>" alt="" />
<?php if (++$count > 15) { break; } ?>
<?php endforeach ?>
There's also a recipe for implementing a function that will display a next page of images when the number is exceeded.
Here's a sample recipe regarding the column question:
LIMITING THE AMOUNT OF COLUMNS IN A SINGLE ROW IMAGE DISPLAY
The CSS way is to have each image in a div that has something like: style="float: left; width: 200px". This will make them flow from left to right and wrap when they run out of space (you can put them inside a bigger fixed width container).
Or with a table you can have one table cell per image and insert a closing and opening TR every X images. Here's a code snippet that does that:
Which is just a way of saying "Every 2 images insert "</tr><tr>"".
Here’s a single row example using the thumbnail2 image as a link to a detail page, separate Title and Subtitle fields, a hidden border for IE and a fixed height for the image cell so that everything lines up nicely.
Similarly, if you’re not using images this code will output a </tr><tr> after every 2 <td>...your content...</td> lines:
Use your own variable names instead of $yourrecord, but the inserted code can stay the same.
Hop this helps,
Jerry Kornbluth
Two good questions and both easy to implement with CMS Builder.
There are a number of specific recipes in my CMSB Cookbook [utl]http://www.thecmsbcookbook.com[/url] that address both of of your questions and offer some variations on the theme.
To limit the amount of images on the page to 16 you can use this concept which counts the number of image records that are displayed by the foreach loop and when the number is greater than 15 the "break" stops the loop:
<?php $count = 0; ?>
<?php foreach ($record['gallery_images'] as $upload): ?>
<img src="<?PHP echo $upload['thumbUrlPath'] ?>" width="<?PHP echo $upload['thumbWidth'] ?>" height="<?PHP echo $upload['thumbHeight'] ?>" alt="" />
<?php if (++$count > 15) { break; } ?>
<?php endforeach ?>
There's also a recipe for implementing a function that will display a next page of images when the number is exceeded.
Here's a sample recipe regarding the column question:
LIMITING THE AMOUNT OF COLUMNS IN A SINGLE ROW IMAGE DISPLAY
The CSS way is to have each image in a div that has something like: style="float: left; width: 200px". This will make them flow from left to right and wrap when they run out of space (you can put them inside a bigger fixed width container).
Or with a table you can have one table cell per image and insert a closing and opening TR every X images. Here's a code snippet that does that:
<?php $maxCols=4; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
Which is just a way of saying "Every 2 images insert "</tr><tr>"".
Here’s a single row example using the thumbnail2 image as a link to a detail page, separate Title and Subtitle fields, a hidden border for IE and a fixed height for the image cell so that everything lines up nicely.
<table width="100%" border="0" cellpadding="5">
<tr>
<?php foreach ($your_sectionRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align=”center” height="350" valign="bottom">
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /><br /><div align="center" class="medium-title"><?php echo $record['title'] ?></div>
<div align="center" class="medium-text"><?php echo $record['sub_title'] ?></div></a>
</td>
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?><?php endforeach ?>
</tr>
</table>
Similarly, if you’re not using images this code will output a </tr><tr> after every 2 <td>...your content...</td> lines:
<table border="1">
<tr>
<?PHP foreach ($yourrecords as $record): ?>
<td>
<?PHP echo $record['your_content'] ?><br />
</td>
<?PHP $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?PHP endif; ?>
<?PHP endforeach; ?>
</tr>
</table>
Use your own variable names instead of $yourrecord, but the inserted code can stay the same.
Hop this helps,
Jerry Kornbluth
The first CMS Builder reference book is now available on-line!
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Re: [gkornbluth] column & lightbox list on album
By jacgo - December 15, 2011
Hi [font "Verdana"]Jerry [/#000000]
I tried to build the code like yours. but not really easy to understand...
It is complicated.
My programing skill is not really good. I feel sorry..
What I need is build a album with cmsBuilder.
Hope there are some one know how to build it in easy & simple way.
Thanks!
I tried to build the code like yours. but not really easy to understand...
It is complicated.
My programing skill is not really good. I feel sorry..
What I need is build a album with cmsBuilder.
Hope there are some one know how to build it in easy & simple way.
Thanks!
Re: [jacgo] column & lightbox list on album
By Jason - December 15, 2011
Hi,
Sometimes a good approach is to create the page without using CMS Builder first. Just get the page working using plain HTML. Once you have that looking the way you want and using lightbox, you can then try to integrate CMS Builder into it.
Give this a try and let us know if you run into any problems.
Sometimes a good approach is to create the page without using CMS Builder first. Just get the page working using plain HTML. Once you have that looking the way you want and using lightbox, you can then try to integrate CMS Builder into it.
Give this a try and let us know if you run into any problems.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/