Gallery like this?

16 posts by 9 authors in: Forums > CMS Builder
Last Post: July 1, 2010   (RSS)

By einslistir - June 17, 2009

Hi CMS Builder friends,

I’m looking for a gallery solutions for a CMS Builder site, I’m doing for a photographer.

Is it possible to do a gallery like this: http://fotograf-aasmul.dk/?mode=show&page=41

Thanks!

Also other solutions, that solve my problem in another way, so it still looks good, are welcome…

Re: [einslistir] Gallery like this?

By Kenny - June 17, 2009 - edited: June 17, 2009

I looked at the code and couldn't tell exactly what script that was.

One that is similar is called "Galleria"

A successful implementation of galleria and CMS builder can be found here:

http://www.sagentic.com/gallery/demo/index.php

and

http://www.sagentic.com/gallery/demo/index2.php

The Galleria Project can be found here:

http://code.google.com/p/galleria/


This took about 5-10 minutes of installation and coding. I didn't do any extra styling. It's doesn't get any easier.

Kenny

Re: [einslistir] Gallery like this?

By ross - June 17, 2009

Hi there.

Thanks for posting!

I defintiely like the look of what Kenny posted so check that one out. There are lots of ways to do this though so it's just a matter of finding the one that works best for you.

Definitely check out what Kenny posted. I like that one :).
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

Re: [sagentic] Gallery like this?

By einslistir - June 23, 2009 - edited: June 23, 2009

Hi Kenny,

First of all, thank you very much for your help so far. The solution you came up with, seemes to be just the right for me. Especially the version of Galleria shown as Demo 2.

Maybe I ask too much now, but could you post the index2.php file and the preset (schema) file where you implemented Galleria?

I’m in a hurry now and think I could save some time, if I can see an example of how the Galleria code is looking, when it is together with the php code on a CMS Builder page.

Or am I wrong, when I suppose it’s all about using a JavaScript, which is controlling how the images in the gallery appear on the page?

I have never worked with a gallery before and never used more than one image on each page on sites, I’ve done with CMS Builder. That’s why I maybe ask some stupid questions here right now…

Re: [einslistir] Gallery like this?

By Kenny - June 23, 2009

Create a section with a "Title" textfield and a "Content" Upload

Upload the files for Galleria into a folder with a file that contains this code:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "/home/XXXXXXX/public_html/webadmin/lib/viewer_functions.php";

list($demo_galleryRecords, $demo_galleryMetaData) = getRecords(array(
'tableName' => 'demo_gallery',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$demo_galleryRecord = @$demo_galleryRecords[0]; // get first record

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Galleria Demo 2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="../trunk/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="../trunk/jquery.galleria.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('.nav').css('display','none'); // hides the nav initially

$('ul.gallery_demo').galleria({
history : false, // deactivates the history object for bookmarking, back-button etc.
clickNext : false, // helper for making the image clickable. Let's not have that in this example.
insert : undefined, // the containing selector for our main image.
// If not found or undefined (like here), galleria will create a container
// before the ul with the class .galleria_container (see CSS)
onImage : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing
});
});

</script>
<style media="screen,projection" type="text/css">


*{margin:0;padding:0}
body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{color:#888;position:absolute;top:250px;left:3px;width:200px;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:200px;float:left;}
.gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
.gallery_demo li.hover{border-color:#bbb;}
.gallery_demo li.active{border-style:solid;border-color:#222;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

.galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}

.nav{padding-top:15px;clear:both;}

.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
.info p{margin-top:1.6em;}

.nav{position:absolute;top:410px;left:0;}

</style>

</head>
<body>
<h1><?php echo $demo_galleryRecord['title'] ?></h1>
<div class="demo">
<ul class="gallery_demo_unstyled">
<?php foreach ($demo_galleryRecord['content'] as $upload): ?>
<li><img src="<?php echo $upload['urlPath'] ?>" alt="<?php echo $upload['info1'] ?>" title="<?php echo $upload['info1'] ?>"></li>
<?php endforeach ?>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
</div>
</body>
</html>


Change the fields in the code to match your setup.


Kenny

Re: [sagentic] Gallery like this?

By einslistir - June 23, 2009

Hi Kenny,

This is fantastic! Thank you very much! Now I can see some light in the end of the dark tunnel…

:)

Re: [sagentic] Gallery like this?

By einslistir - July 9, 2009

Hello,

I had a problem with the gallery above, because its css did all the time override the one, I had on the page.

Now I’m looking for this one: http://www.dhtmlgoodies.com/index.html?whichScript=image_slideshow

The only problem is, that I don’t know how to get the php commands from CMS Builder to fit in, so I can see the images in the right way.

Also I’m looking for this one, to have on the frontpage: http://www.dhtmlgoodies.com/index.html?whichScript=image_slideshow2

There is the same problem with both, that I can’t figure out how to use them together with CMS Builder.

And how to protect my own page layout, when using galleries with their own css? Is there any easy way to solve that?

Any help out there? Thanks!

Re: [einslistir] Gallery like this?

By ross - July 9, 2009

Hi there.

Thanks for posting!

There is probably going to be more to this one than we can really handle through support. If you like, we could try a consulting project on it :).

Send me an email through consulting@interactivetools.com and we'll go from there.

Thanks!
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

Re: [svsanchez] Gallery like this?

By Chris - December 18, 2009

Hi svsanchez,

Is this what you were looking for?

[url http://devkick.com/lab/galleria/]http://devkick.com/lab/galleria/[/url]

[url http://devkick.com/lab/galleria/demo_01.htm]http://devkick.com/lab/galleria/demo_01.htm[/url]

[url http://devkick.com/lab/galleria/demo_02.htm]http://devkick.com/lab/galleria/demo_02.htm[/url]

I hope this helps! :)
All the best,
Chris