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.
65 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
Erin
# 13 August 2010
I am working on my Mom’s website right now using galleriffic but am having some problems. I resized all of my image thumbnails to 55 px, but for some reason it is only fitting 15 thumbnail pics on the first page. I ideally would like to have all thumbnails on one page, but after the 15th one it automatically defers it to ‘page 2’ of thumbnails… is there any way to get around this? Thank you so much for your help!!
Jonathan Stubbs
# 13 August 2010
@Erin - you can change the numThumbs: in the script’s intialising code – in the tutorial it is set to 12. Also you could disable the paging by setting enableTopPager: and enableBottomPager: to false.
Hope this helps.
Erin
# 14 August 2010
Thank you so much! You are an incredible help. Of course with my luck, there is always something new… I got the thumbnails to work just the way I want, except now the opacity rollover is messing up. I will click on a thumbnail and it will show the correct picture, but the wrong thumbnail will be highlighted in my thumbnail list. Thank you again for your help, I will try to figure this new problem out! I really appreciate it
Aamer Jamal
# 13 October 2010
hi i want to put the border on main image i tried every thing in css but failed plz help…..
Jonathan Stubbs
# 13 October 2010
Hi Aamer, try something like this which should work ok:
div.slideshow img {
display: block;
border: 4px solid #000;
}
Jorge Cocompech
# 23 October 2010
@Jonathan:
Can i use this for a featured articles in an principal page ?
I want to do something similar like this
Jonathan Stubbs
# 23 October 2010
@Jorge – that example uses a slider which may be more appropriate for your needs. I don’t know the slider, but it appears to be called loopedSlider.
Alternatively, the jQuery Cycle plugin would also be a good choice.
Unajo
# 8 February 2011
nice plug in!
I have some problems including 2 galleries with galleriffic in the same jsp file, it seems that be a global data that avoid me to see the 2 galleries independet.
Do you know something about this?
thanks.
Cara
# 8 May 2011
Hey! I’ve been trying to implement Galleriffic into my website for a long while now. In straight up HTML, it’s great! Works wonderfully!
But when I try and implement it into my WordPress, it won’t even load! All I get is the loading graphic circling around. I just copied everything over correctly, and all the information in the header is linked correctly in the theme. So do you know what the issue could be?
I have googled around a bit and have found nothing.
Jonathan Stubbs
# 9 May 2011
Hi Cara, sorry can’t help you – not so familiar with WP, but maybe a WP person could answer you. Its also worth checking on the WP forum or the Galleriffic page.
Coel
# 22 May 2011
This may be a dumb question, but I can’t find it at the moment. How do I disable the images from being links to the next image, or from being links at all?
Jaypalsinh
# 7 June 2011
how to add the dyanmic image into inside ul tag
i had try images also display but it’s not getting slide shot will u help me
I am pulling in images thumbs and large images from a mySQL db here’s the code.
<div id=“thumbs” class=“navigation”> <ul class=“thumbs noscript”>
<?php do { ?> <li> <a class=“thumb” name=“leaf” href=“a2011w/uploadmainto/<?php echo $row_imagefilset[‘lgimagename’]; ?>” title=“Title #0”> <img src=“a2011w/uploadthumbto/<?php echo $row_imagefilset[‘thumb’]; ?>” alt=“Title #0” /> </a> <!—<div class=“caption”>
<div class=“image-title”>Title #0</div> <div class=“image-desc”>Description</div> </div>—> </li> <?php } while ($row_imagefilset = mysql_fetch_assoc($imagefilset)); ?> </ul> </div>
My question is this:
I am trying to modify the jquery script so that when the users hovers over a thumb, the image changes and when he clicks the thumb the large image shows on a new page.
I have tried hover and tried mouse over and neither is having any affect.
Have you ever tried this and got it to work.
Thanks for your time,
Gregg
Jonathan Stubbs
# 26 June 2011
@Gregg, I would think your question is best placed on the Galleriffic comments page – as it is specific to the workings of the script.
Hello, thanks for a great tutorial! I happened upon this and learned also about Textpattern.
I hope you can help with a Gallerific issue: I’ve put more content in the image description, and the content now flows over the footer.
I have have put a top margin on the footer div (for this page only) which solves the problem. But I’m sure there is a better way to do this, maybe there are some float problems. But I can’t work out where.
The footer div is outside the gallery div, but all in the wrap div.
I’d appreciate the help if you can,
regards,
Caron.
ok, here you go.
page 1 of gallery is ok with current code, but
page 2 will not be ok unless all thumbnails are populated, or the top margin is changed to suit the second page…though not the first…
in the gallery page is the style to apply to this page only:
<style>
#wrapper #container #footer { margin-top: 55px; }
</style>
Hope I’m explaining the problem ok..
thanks for your time,
Caron
caron
# 22 July 2011
hi, don’t worry, I’ve solved the problem.
In case anyone else is interested:
the margin bottom needs to be adjusted in the div.caption-container
in gallerific.css
bye
Ann
# 9 November 2011
In IE the big image outlines to the top of the div, anyone an idea to get the image centered? (spent yesterday all day trying to get it fixed but no success yet…..)
Jonathan Stubbs
# 9 November 2011
@Ann, if you use the CSS that comes with Galleriffic the images are normally centered, so I would suggest starting with that and then debugging.
Otherwise, post a link that someone could look at.
Jonathan Stubbs
# 11 November 2011
@Ann – there seem to be issues with IE, see this page for a possible fix or enter “galleriffic ie problem photo floating to top” in Google – lot of possible issues/solutions.
Ann
# 11 November 2011
@Jonathan thanks very much, the possible fix seems indeed the clue!
I just had to put the doc type on top of the page, which I normally automatically do but did not realize/see that on this demo file there is standard no doc type…..
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Kevin
# 29 November 2011
In IE the large images do not fit into the container, only portion of them can be seen – the dimensions of those images were scaled down to be smaller than the height and width of the container.
Everything looks fine in all other browsers, just not IE8.
any ideas?
thanks in advance!
Kevin
# 29 November 2011
oh, I figured it out…
originally I had created the gallery quite large, then when I applied changes to make it smaller IE saves those large images. So I renamed all image files and now they appear as they should.
by-the-way: I noticed that some people are having issues with adding new images and they appear at the top of the page outside of the container. I had that issue; make sure that the new images dimensions fit within the container dimensions. Or adjust the css width and heights.
sassy
# 6 December 2011
i love gallerific but is there any way to amend the script so the slideshow starts on a random image rather than the first one ?
I’m not sure it’s an easy thing to change without a few consequences.
Jonathan Stubbs
# 7 December 2011
@sassy – I think that is a question for Galleriffic support rather than here..
mark
# 12 January 2012
great plugin! how can i change the plugin to not fade in and out when inserting images into the gallery (as in example 4) ?
kus
# 7 April 2009
WOW, greats tip, thanks a lot Jon, I really needed this :)