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.
WOW, greats tip, thanks a lot Jon, I really needed this :)
Glad you like the tutorial…one of the reasons I wrote the tip was because you asked for it...
This is really excellent, Jonathan.
Jon, do you have request form too??
thanks :)
What type of request form, kus? A contact form?
yeah like that, request tutorial or tips form. :)
@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.
Thanks for the tutorial.
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
I need galleriffic-image-galler load image from database SQL 2005 in ASP.net. Please Help me
This is awesome!!
IS there a way to enable comments to each photo?
@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?
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!
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.
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.
The Galleria guy posted a jQuery 1.3 compatible version of his script here a couple of weeks ago.
Thanks Joe!
not working in ie8
Very cool, I just so happen to be working on a website with galleriffic and am looking into porting it to TXP.
Does anyone know of a way to use it with videos in addition to images?
jacknails, as far as I understand the script does not work with video. Your best bet would be to ask on the Galleriffic website.
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
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.
Thanks for your response Jonathan. When I’ve seen other galleries in IE the borders all appear equal though.
Any idea why I’m getting little question mark icons () to the left of each photo on my site?
It’s driving me nuts!
@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.
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?
I think you are seeing issues with the replacement character. The problem is centered around the
a.advance-linkon the gallery.Some more reading here.
Thank you! I wasn’t able to figure out what was happening with a.advance-link; however, by changing the content type, it removed that “black (or in my case gold) diamond of death.”
Kudos!
is there any option to display image slide In & slide Out instead of fade in fade out??
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.
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
@Daniel – I am not sure what implementation you are referring to?
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!!
@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 settingenableTopPager:andenableBottomPager:tofalse.Hope this helps.
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
hi i want to put the border on main image i tried every thing in css but failed plz help…..
Hi Aamer, try something like this which should work ok:
@Jonathan:
Can i use this for a featured articles in an principal page ?
I want to do something similar like this
@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.
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.
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.
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.
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?
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 think the latest version of this tip does what you want?
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
@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.
@Caron: Need a link to check!
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
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
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…..)
@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.
Thanks for replying, my link: http://www.tryer.woelmuis.nl/galleriffic-2.0/lois2.html
I only changed the first 2 images and in Internet Explorer they float to the top…….
@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.
@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”>
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!
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.
@Kevin – glad you figured it out!
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.
@sassy – I think that is a question for Galleriffic support rather than here..
how to load it starting on image #5 for example
great plugin! how can i change the plugin to not fade in and out when inserting images into the gallery (as in example 4) ?
I have downloaded the files for galleriffic and I decided to use example-5 for the photo galleries on my photography website.
I need to make very easy and fast changes (for someone who knows what they are doing) to get this result:
White background instead.
Large images for slideshow all 900 × 600 pixels
Thumbnails at the top
NOTHING ELSE, no links for next or previous slide, no title, no text to the right of main image, JUST thumbnails and large photo under the thumbnails…
Can someone help? :)
Thank you so much, Rosa.
Hi Rosa:
White BG. Depends if you want the entire
#containerwhite, in which case use:Large images – from memory this is set in the two
div.slideshow-containeranddiv.loaderselectors. Look for them and change the values for width and height.Look at the Paola de Grenet site for more, I think this is what you are looking for. The follow up tutorial to this one has more info.
Good luck!
Hi! My site has not gone live yet but I’m having trouble managing one of my galleriffic pages.
http://kellymcc.com/new_jquery/bobbies.htm
As you can see, having the text block messes up the thumbnails. For some reason clicking on the first thumbnail in each group highlights some other random thumbnail, and the images don’t show up.
This page seems to work fine, although I had to break the <ul> tag to insert that line break, which seemed to confuse the script:
http://kellymcc.com/new_jquery/index.htm
I tried taking out the text on the Bobbies page but there is still the issue with the first thumbnail in each row. (I’ve tried removing the title for the second half of the thumbnails, AND the linebreak, to no avail)
http://kellymcc.com/new_jquery/bobbies2.htm
Do you have any ideas about how I could,
a) insert a linebreak image without messing up the thumbnails
b) insert text before or between thumbnails without messing them up?
Thanks! Much appreciated!
Hi Kelly, hope you have been following the non-plugin method for using Galleria without any plugins
I would think the main problem you are having is two
<ul class="thumbs">on the page as that would most likely throw Galleria off.Please try first to get the gallery working with one
<ul>. If it works ok, add the text. If that works, add the line break and possibly a second<ul>again. If you see that it breaks then you know what is breaking it – better to start with a clean slate and add items until is breaks – saves time in the long run. But – I don’t think you can have two galleries on the page.Thanks for the response Jonathan! I took your advice and broke things down one by one – I tried pasting the thumbnail area of code from the working page and pasted it into the second one that was having issues, and it works even with the text and images, so I guess somehow I screwed up something with the thumbnail code, or maybe there’s something wrong with those two images that aren’t working. I’ll have to experiment more with the <ul> tags and be careful about adding new images.
Thanks so much! :)
Oh, I think I’ve been using the non-plugin method? I only uploaded a few js and css files. I’m not sure what the other method entails.
I’m happy you got it working! The main difference between the method outlined in this tip and the non-plugin method I linked to in my last comment is that the latter method does not use the
wet_for_each_imageto process the images. This plugin is no longer needed as new Textpattern core tags have made it redundant.I think I used
smd_thumbnailin the new method, but you don’t need to use the plugin if you don’t want to (can use the built-intxp:thumbnailinstead), it just offers more flexibility in case you ever want to change the size of your thumbnails.If you need any more help, just holler!