Say hello to Galleriffic 2.0.
For first time readers, Galleriffic is a jQuery photo gallery optimized to handle high volumes of photos while conserving bandwidth. h0bbel has posted a nice read on some of the benefits of Galleriffic over other photo gallery scripts.
New Features
- Keyboard Navigation
- Support for synchronized transitions (image cross-fades)
- Ability to add or remove images after the gallery is initialized
- Support for custom hash identifiers (when using history)
- Better API to make it easier to customize
- Smarter pagination
- Integration with the jquery.history plugin for history support
Warnings to users attempting to upgrade from version 1.0
- The onChange event in 1.0 has been renamed to onSlideChange.
- All transition event handlers have new signatures, so you will need to make sure to update any transition event handlers you have implemented.
- Using synchronized transitions requires changes to your stylesheet – primarily the additional of relative and absolutely positioning so that two images can occupy the same space at the same time.
There are now 5 examples, each builds on the previous. For a visual treat, check out the last example, whose colors I inverted.
The best one I found till now
Excelent!!!!!!!!!!!
Hi there,
It was mentioned in a comment a while ago – but this script has some issues when used in conjunction with the latest jQuery release (1.4.x).
Are you planning to add support for jQuery 1.4?
Hello. I am working that will be using a lot of image slideshows and your jquery photo gallery is awesome for it. I’ve gotten it working on a regular html site just great, but I cannot seem to get it working on a Wordpress site. Do you have any documentation handy for integrating your jquery script with Wordpress? Google searches have so far proved fruitless with all my trial and error. I’m surprised no one else is asking this question, so I’m posting it here.
I’m currently setting up the files like thus:
in the header.php:
I put this script code between the meta tags and the css:
<script type="text/javascript" src="/scripts/jquery.galleriffic.js”>
<script type="text/javascript" src="/scripts/jquery.history.js”>
<script type="text/javascript" src="/scripts/jquery.opacityrollover.js”>
Then in my regular index page, I have the content divs of the photogallery.
Finally, in the footer.php, I have added right before the tag:
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$(’div.navigation’).css({’width’ : ‘300px’, ‘float’ : ‘left’});
$(’div.content’).css(’display’, ‘block’);
…… –and on til the closing tag.
This does not work. I’m unsure of the correct procedure for Wordpress to display this correctly. I added the css of galleriffic to my own style sheet, because I didn’t understand how to get Wordpress to load galleriffic.css. Viewing the page source does show the javascripts were loaded. I also tried adding the actual photo gallery content divs into a Page from the Wordpress admin, but that proved fruitless too. I also do not know in what exact folder Wordpress expects my thumbnail and regular size images for this gallery to be. I could upload them all one by one from the Wordpress admin, but since I am working locally via Mamp, it would seem easier to just put the images in the right folder. But what folder would that be?
Is there documentation somewhere that can highlight the correct procedure for integrating this jquery gallery into Wordpress? I did find a plugin that claims to be similar to your Galleriffic gallery, but I’d much rather use yours, since it’s so great. Any help you can provide that can get this working would be greatly appreciated and thanked with a donation
Hello Trent –
Superb plugin. I’ve tested many, and Galleriffic is certainly my favorite. I’m currently building a site for a artist. In pursuit of minimalism I’ve added a button to toggle the thumbs off/on, but I cannot discover how to set them as ‘off’ by default.
Here’s the script to turn off the navigation panel:
$(”a.thumb_btn”).click(function () {
$(”.navigation”).fadeToggle();
return false;
});
The button works, but any attempt to disable or hide .navigation on pageload results in the permanent hiding of the entire gallery – any thoughts? Thanks again,
Reed
Ah, and here’s the link to the site with the toggled thumbs:
http://www.benplattes.net/art.html
I had some missing information in my previous post. I would like to add that I do have the code: in the header.php area as well as the callouts to the other javascripts. Any help or documentation on integrating Galleriffic with Wordpress would be greatly appreciated. I’m sure someone has tried to add it to their Wordpress site before, so someone must know how. I’m sure it’s something so simple, but I’ve hit a brick wall and could really use some help here. Thanks!!
It looks like the php code will not show up in comments but it’s the enqueue script to call jquery.
Love the gallery but it is not valid XHTML. You have used 2 attributes in the tag, ‘original’ and ‘description’, which do not validate. Is there a workaround for this so I can still use the gallery, including a title and description, but using valid HTML code?
Sorry, my last post should read “2 attributes in the ‘a’ tag…”
Hey,
getting this erroer with win explorer 8 in regular and capatibility mode. – viewing your demo page ( 4 )
firefox and safari work perfectly.
any work around?
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; GTB6.4; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Thu, 11 Mar 2010 22:44:49 UTC
Message: ‘e’ is undefined
Line: 479
Char: 6
Code: 0
URI: http://www.twospy.com/galleriffic/example-4.html
Message: ‘e’ is undefined
Line: 479
Char: 6
Code: 0
URI: http://www.twospy.com/galleriffic/example-4.html
As regards my issue with Wordpress and jquery, I figured out what was wrong by asking the Wordpress forums. You have to call the external javascripts AFTER the wp_head tag in the header.php. You use the enqueue script to call jquery before the wp_head tag. And the images are called like thus: <img src="/photos/images.png” width=”114″ height=”111″ alt=”title” /> Hope that helps anyone else encountering this problem.
That tag should read img src=” php bloginfo(’template_url’); /photos/images.png” width=”114″ height=”111″ alt=”title” , but add the proper greater than and less than signs.