Galleriffic image gallery
Finding a nice image gallery is not that difficult – there are plenty of choices out there using a variety of JS libraries. There are also various Textpattern plugins that do an excellent job of outputting the images, with or without a JS library.
In a recent project, I decided to use Galleriffic – a jQuery based project. Although the gallery is really good the instructions are a little difficult to follow.
Additionally, I wanted to create a category-based image gallery using Textpattern’s in-built image categories. Here is what you need to get started:
- Download, install and activate the upm_image plugin
- Download, install and activate the wet_for_each_image plugin
- Download the Galleriffic files. I used the minified version for this project
Upload the Galleriffic files to your install
Once the Galleriffic package has been downloaded, upload the jquery.galleriffic.min.js file to your Textpattern install. In this project, the file was uploaded to the /javascript folder in the root folder.
Create a file containing the gallery controls
The Galleriffic demo page has two demos – an advanced demo and a minimal demo. I used the advanced demo. Here is the code:
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('.selected').fadeTo('fast', 1.0);
},
function () {
$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
}
);
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv = $('#gallery').galleriffic('#thumbs', {
delay: 2000,
numThumbs: 12,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: true,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
onChange: function(prevIndex, nextIndex) {
$('#thumbs ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(callback) {
$('#slideshow, #caption').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow, #caption').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs ul.thumbs').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs ul.thumbs').fadeIn('fast');
}
});
});
Save the code in a file called galleriffic.js and upload to the /javascript folder.
Link to the JS files
In your page template or in a form, you need to link to the JS files. In my project, I have the following in my header form which is outputted on all page templates:
<!-- JS -->
<script type="text/javascript" src="<txp:site_url/>javascript/jquery.ui-1.5.3/jquery-1.2.6.js"></script>
Then in your photos page template, place the following either just before the closing <head> tag or just before the closing <body> tag:
<!-- galleriffic -->
<script type="text/javascript" src="<txp:site_url/>javascript/jquery.galleriffic.min.js"></script>
<script type="text/javascript" src="<txp:site_url/>javascript/galleriffic.js"></script>
Create some images and categorise them
Assuming you already have some images, assign them to the image categories of your choice.
And now for the gallery..
<txp:article limit="1" />
<!-- Start Gallery Html Containers -->
<div id="gallery" class="content"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="controls" class="controls"></div>
<div id="caption" class="embox"></div>
Place the above code where you want the gallery to appear. The Galleriffic JS takes care of the rest.
Category navigation controls
<txp:category_list section="photos" wraptag="ul" class="category_list" break="" exclude="article-images,site-design" type="image">
<li <txp:if_category name='<txp:category />'>class="active"</txp:if_category>>
<txp:category link="1" title="1" /></li>
</txp:category_list>
.....
<div id="thumbs" class="navigation clearfix">
<ul class="thumbs noscript">
<txp:if_category>
<txp:wet_for_each_image sort="id desc">
<txp:upm_image form="galleriffic_thumbs" image_id="{id}" type="image" />
</txp:wet_for_each_image>
<txp:else />
<txp:wet_for_each_image category="players" sort="id desc">
<txp:upm_image form="galleriffic_thumbs" image_id="{id}" type="image" />
</txp:wet_for_each_image>
</txp:if_category>
</ul>
</div>
The first part of the code outputs a category_list which calls all images in the various image categories except article-images and site-design. The if_category tag provides a navigation aid for the user.
The second part of the code outputs the image thumbnails. This code can be placed anywhere on your page.
The interesting part is the use of the upm_image and wet_for_each plugins, which retrieve all the images in each category for display. In order to process the images, upm_image uses the galleriffic_thumbs form:
<li>
<a class="thumb" title="<txp:upm_img_name />" href="<txp:upm_img_full_url />"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />"></a>
<div class="caption">
<div class="image-title"><txp:upm_img_name /></div>
<div class="image-desc"><txp:upm_img_caption /></div>
</div>
</li>
Save the form as type misc and save.
34 Comments - Comments RSS Feed
Jonathan Stubbs
# 7 April 2009
Glad you like the tutorial…one of the reasons I wrote the tip was because you asked for it...
Jonathan Stubbs
# 12 April 2009
@kus – if you are asking about where to ask for TXP Tips or tutorials, then you can post a comment on this blog entry. If you are looking for a contact form, there is a TXP Tip on that here.
mr. tunes
# 11 August 2009
good tip, but i think it’s missing the part where you have to make its own stylesheet for the gallerific, right? just a nit picky suggestion
henryjohn
# 12 August 2009
I need galleriffic-image-galler load image from database SQL 2005 in ASP.net. Please Help me
Jonathan Stubbs
# 27 September 2009
@Fede – not that I know of. Galleriffic only works with jQuery 1.23 too. Anyone seen an alternative gallery that works with jQuery 1.3?
Fede
# 27 September 2009
I was thinking of using the txp:article tag on the body of this script and add somehow the txp:comment… no good?
thankyou for your answer!
Jonathan Stubbs
# 27 September 2009
I am stupid sometimes – Galleria does not work with jQuery 1.3, not Galleriffic. Doh!
Interesting — that’s the first I’d heard about Galleria/jQuery compatibility, but now that I look I see similar warnings elsewhere. Surprises me because I have no problems here.
Off-topic, I know, but I wanted to point out that at least some Galleria setups work with jQuery 1.3.
Jonathan Stubbs
# 28 September 2009
Yes Jeff, I have heard of sites that have Galleria working with jQuery 1.3. Someone sent me this link yesterday of a galleria install working with 1.3.
Joe Hastings
# 30 September 2009
The Galleria guy posted a jQuery 1.3 compatible version of his script here a couple of weeks ago.
Jonathan Stubbs
# 11 January 2010
jacknails, as far as I understand the script does not work with video. Your best bet would be to ask on the Galleriffic website.
Howard
# 24 March 2010
Thanks for that. Ive got a problem though. Maybe you could help.
How can I get the thumbnails to level with the top of the main images please? Link below. Ta.
http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photo2.htm
Jonathan Stubbs
# 25 March 2010
Howard, the thumbnails are aligned with the main image, at least in Safari. Without looking at your CSS, its most likely a particular browser issue.
Howard
# 26 March 2010
Thanks for your response Jonathan. When I’ve seen other galleries in IE the borders all appear equal though.
Jonathan Stubbs
# 17 April 2010
@Laura – I would first check your HTML source via the Validator – you have some errors in your markup. Check the HTML Tidy option (under “More Options”) for some help cleaning up the markup.
lijing
# 19 April 2010
there is a problem,if there has more then 500 pictures, load the thumb by one times,it is not good idea,the html source is very lager,has any idea to support AJAX to get the small pictures ? i am a jquery beginner! thanks
Ok, so I ran the page through the validator, used the HTML Tidy Option and swapped out their code for mine. It didn’t show any errors in the body, which is where I would assume the problem is occurring.
The page now gets the green light of approval, but the little question mark icons still appear. What gives?
Jonathan Stubbs
# 20 April 2010
I think you are seeing issues with the replacement character. The problem is centered around the a.advance-link on the gallery.
Some more reading here.
James
# 27 May 2010
is there any option to display image slide In & slide Out instead of fade in fade out??
Jonathan Stubbs
# 27 May 2010
I have not found an option for sliding with Galleriffic James. You might want to check out jQuery Cycle for sliding, or one of the many slider scripts.
Daniel Moss
# 16 July 2010
Do you have an example of this implementation? How would this be different from just adding text links at the top that link to separate pages each with a gallerefic gallery?
thanks,
daniel
kus
# 7 April 2009
WOW, greats tip, thanks a lot Jon, I really needed this :)