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!
|
|
|
Gena
Posts: 591
|
Posted: 03/20/2012, 8:11 AM |
|
Great! Thank you!
_________________
Gena |
|
|
E43509
Posts: 283
|
Posted: 03/20/2012, 8:15 AM |
|
Thanks for sharing
|
|
|
clahti2
Posts: 107
|
Posted: 03/20/2012, 10:18 AM |
|
very nice, thanks!
|
|
|
|