close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Light Box Effect

Thread began 7/08/2011 8:42 pm by A Sound Design | Last modified 7/20/2011 10:05 am by Jason Byrnes | 1180 views | 7 replies |

A Sound Design

Light Box Effect

I have created a page that binds uploaded image thumbnails, ie. thumb1, thumb 2 etc. to a table in a page. I would like to be able to link to the full size image from the thumbnail and show it in a pop up. How do I do this?

Sign in to reply to this post

Jason ByrnesWebAssist

depends on the lightbox you use, with sllimbox:
slimbox

you use a link, with rel attribute:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>



you could create a recordset to return the thumbnail and large image file name, and use those in the link code for example:
<a href="images/<?php echo $row_recordsetName['largeImage']; ?>" rel="lightbox" title="my caption"><img src="thumbs/<?php echo $row_recordsetName['thumbImage']; ?>" /></a>

Sign in to reply to this post

A Sound Design

Thanks for this. It works great.

I am using it to create a dynamic photo gallery so that up to 5 images can be displayed. maybe there's a better way but in my Recordset I have Photo1, Photo2 etc. On the page I bind these to each TD in the table to display them. How would I go about it so that if only 2 images have been uploaded the other 3 are not displayed? At the moment I have each as a placeholder on the page but do not want to show it if empty.

Sign in to reply to this post

Jason ByrnesWebAssist

use an if statement:

php:
<?php if($row_recordsetName['Photo1'] != "") { ?>
<td>
Photo1 display.....
</td>
<?php ?>
<?php 
if($row_recordsetName['Photo2'] != "") { ?>
<td>
Photo2 display....
</td>
<?php ?>
etc.....
Sign in to reply to this post

A Sound Design

Using the code:

<tr>
<?php if $row_rsDirectory['Photo1'] != "" { ?>
<td>
<a href="images/uploads/<?php echo $row_rsDirectory['Photo1']; ?>" rel="lightbox" title=""><img src="images/uploads/thumbnails/<?php echo $row_rsDirectory['Photo1']; ?>" /></a></td>
<?php } ?>
<?php if $row_rsDirectory['Photo2'] != "" { ?>
<td><a href="images/uploads/<?php echo $row_rsDirectory['Photo2']; ?>" rel="lightbox" title=""><img src="images/uploads/thumbnails/<?php echo $row_rsDirectory['Photo2']; ?>" /></a></td>
<?php } ?>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

I get an error: Parse error: syntax error, unexpected T_VARIABLE, expecting '(' in C:\xampp\htdocs\affiancedv2\directory\index.php on line 222

Sign in to reply to this post

Jason ByrnesWebAssist

sorry, the example code from before was missing () around the if statement conditions, the corrcet sample code shouldbe:

php:
<?php if($row_recordsetName['Photo1'] != "") { ?>

<td>
Photo1 display.....
</td>
<?php ?>
<?php 
if($row_recordsetName['Photo2'] != "") { ?>
<td>
Photo2 display....
</td>
<?php ?>
etc.....
Sign in to reply to this post

A Sound Design

Thanks Jason. You've been a great help.

Sign in to reply to this post

Jason ByrnesWebAssist

you're welcome.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...