CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Implementing LIGHTBOX gallery in CCS

Print topic Send  topic

Author Message

Posts: 47
Posted: 03/20/2012, 7:49 AM

1. Download

2. Copy folder (fancybox) and (jquery-1.4.3.min.js) after unpacking the downloaded file on the root of your project.

3. Build a gallery using (Gallery Builder)

4. Open (Gallery) in HTML and add this on after <head> tag.

<script type="text/javascript" src=""></script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');

<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$(document).ready(function() {

'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';


5. Find the place were is located the picture and add


<td align="center">
<!-- BEGIN Panel RowComponents --><a href="Uploads/Gallery/{foto}" id="ati_galeryRowComponentsfoto_{ati_galery:rowNumber}" rel="example_group"><img style="BORDER-BOTTOM: #b4b4b4 2px solid; BORDER-LEFT: #b4b4b4 2px solid; BORDER-TOP: #b4b4b4 2px solid; BORDER-RIGHT: #b4b4b4 2px solid" alt="{foto}" src="Uploads/Gallery/{foto_Src}" width="170"></a><br>
<!-- END Panel RowComponents --> </td

6. Generate the page and you will have light box implemented gallery

Have a nice time!
View profile  Send private message

Posts: 591
Posted: 03/20/2012, 8:11 AM

Great! Thank you!
View profile  Send private message

Posts: 283
Posted: 03/20/2012, 8:15 AM

Thanks for sharing
View profile  Send private message

Posts: 107
Posted: 03/20/2012, 10:18 AM

very nice, thanks!
View profile  Send private message

Add new topic Subscribe to topic   

These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit

Internet Database

Visually create Web enabled database applications in minutes.

Home   |    Search   |    Members   |    Register   |    Login

Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by  and YesSoftware, Inc.