CodeCharge Studio
search Register Login  

Visual Web Reporting

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

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Implementing LIGHTBOX gallery in CCS

Print topic Send  topic

Author Message
2467

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

1. Download http://fancybox.googlecode.com/files/jquery.fancybox-1.3.4.zip

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="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</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() {


$("a[rel=example_group]").fancybox({
'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>';
}
});


});
</script>


5. Find the place were is located the picture and add
rel="example_group"

Example:


<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>
<br>{fotodesc}
<!-- 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
Gena

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

Great! Thank you!
_________________
Gena
View profile  Send private message
E43509

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

Thanks for sharing
View profile  Send private message
clahti2

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 http://support.yessoftware.com.

Internet Database

Visually create Web enabled database applications in minutes.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


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