simple image gallery
5 posts by 2 authors in: Forums > CMS Builder
Last Post: November 15, 2010 (RSS)
By ht1080z - November 15, 2010
Hello Everyone,
i created the below image gallery (based on another posted galleries and issues). this is with lightbox and working ok.
i need something more simple, without lightbox.
Like this: http://www.baylesleatherhouse.com/showroom.php
My script is this (with lightbox):
link to see how it works now: http://intersalas.gr/demo_gallery.php
on this example i used div for the thumbnails but ill would prefer table to make the layout better.
I would appreciate any help on this.
i created the below image gallery (based on another posted galleries and issues). this is with lightbox and working ok.
i need something more simple, without lightbox.
Like this: http://www.baylesleatherhouse.com/showroom.php
My script is this (with lightbox):
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
// load viewer library
$libraryPath = 'cmsact/lib/viewer_functions.php';
$dirsToCheck = array('/home/intersal/public_html/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
// load records
list($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
'limit' => '15',
'allowSearch' => 0,
// 'where' => whereRecordNumberInUrl(1),
));
$displayGallery = $galleryRecords[0];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
.thumbnail_images {
float: left;
height: 110px;
width: 590px;
position: relative;
}
</style>
</head>
<body>
<?php foreach ($displayGallery['images'] as $upload): ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[screenshots]" ><img src="<?php echo $upload['thumbUrlPath'] ?>" alt="" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" border="0" /></a>
<?php break ?>
<?php endforeach ?><br /><br />
<div class="thumbnail_images">
<?php foreach ($displayGallery['images'] as $upload): ?>
<?php if (@++$count == 1) { continue; } ?>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[screenshots]" ><img src="<?php echo $upload['thumbUrlPath2'] ?>" alt="" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" vspace="13" border="0" /></a>
<?php endforeach ?>
</div>
</body>
</html>link to see how it works now: http://intersalas.gr/demo_gallery.php
on this example i used div for the thumbnails but ill would prefer table to make the layout better.
I would appreciate any help on this.
Re: [ht1080z] simple image gallery
By Chris - November 15, 2010
Hi ht1080z,
By Viewing Source on the example URL you linked, you can see they're using [url http://galleria.aino.se/]Galleria[/url]. Here's a simple example of how to get Galleria working with CMS Builder:
Note that you'll need to download the Galleria files so they're accessible.
I hope this helps! Please let me know if you have any questions.
By Viewing Source on the example URL you linked, you can see they're using [url http://galleria.aino.se/]Galleria[/url]. Here's a simple example of how to get Galleria working with CMS Builder:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="galleria/src/galleria.js"></script>
<script>Galleria.loadTheme('galleria/src/themes/classic/galleria.classic.js');</script>
<script>
$(document).ready(function(){
$('.images').galleria();
});
</script>
</head>
<body>
<div class="images" style="width: 800px; height: 600px;">
<?php foreach ($displayGallery['images'] as $upload): ?>
<a href="<?php echo $upload['urlPath'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>">
</a>
<?php endforeach ?>
</div>
</body>
</html>Note that you'll need to download the Galleria files so they're accessible.
I hope this helps! Please let me know if you have any questions.
All the best,
Chris
Chris
Re: [chris] simple image gallery
By ht1080z - November 15, 2010
Chris,
Thank you for your quick reply.
The slideshow working perfectly with the Galleria.js just like you explained.
Here is: http://intersalas.gr/demo_gallery_2.php
But i need something really really simple, without effect or transitions.
One preview on the top and below the thumbnails in 2 rows (autogenerated with CMSB after uploaded by the user). When clicking on any thumb the top preview image just change the large image on the top to the selected.
This can be done without any additional javascript?
Thank you in advance,
Thank you for your quick reply.
The slideshow working perfectly with the Galleria.js just like you explained.
Here is: http://intersalas.gr/demo_gallery_2.php
But i need something really really simple, without effect or transitions.
One preview on the top and below the thumbnails in 2 rows (autogenerated with CMSB after uploaded by the user). When clicking on any thumb the top preview image just change the large image on the top to the selected.
This can be done without any additional javascript?
Thank you in advance,
Re: [ht1080z] simple image gallery
By Chris - November 15, 2010
Hi ht1080z,
You'll have to fiddle with Galleria to get it to work the way you want. You can examine the source code of the URL you provided to see how they got it working the way they did, and/or read through Galleria's documentation.
Alternately, you can hire our consulting department to customize something for you. Please let me know if you'd like more information on that.
You'll have to fiddle with Galleria to get it to work the way you want. You can examine the source code of the URL you provided to see how they got it working the way they did, and/or read through Galleria's documentation.
Alternately, you can hire our consulting department to customize something for you. Please let me know if you'd like more information on that.
All the best,
Chris
Chris
Re: [chris] simple image gallery
By ht1080z - November 15, 2010
Chris,
Ill try customize the Galleria javascript for my needs.
Thank you for your support.
Ill try customize the Galleria javascript for my needs.
Thank you for your support.