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):
<?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:

<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

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.
All the best,
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.