Galleriffic 2.0
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.
October 17th, 2011 at 3:20 pm
Hey, I can see how to reduce the number of columns of thumbnails, but I wonder if there is a way to reduce the number of ROWS? Specifically, I’d like to have two rows of three thumbnails so that I could have really long captions without breaking my layout.
BTW, I love Galleriffic – thanks for building it.
October 22nd, 2011 at 6:11 pm
I show the thumbs, either a landscape and portrait image and a caption – all within a fixed-size 480×480 parent container. Here’s the layout: A 3×3 thumb matrix is in a 180×180 box with absolute position bottom-left. The slideshow id has absolute position top-right and is either 480×300 (landscape) or 300×480 (portrait) with a higher z-index than the captions. There are two captions with lower z-index – one in a 180×300 box with absolute position top-left, and another (with duplicated text content) in a 300×180 box with absolute position bottom right. All images are cropped to be exactly 480×300 or 300×480. When a landscape image shows, then it obscures the top-left caption, and when a portrait image shows, then it obscures the bottom-right caption.
It all works and looks very sexy, except that a selected image is first displayed incorrectly positioned, and then moved (by the DOM layout engine?)
Any ideas on how to get a smooth transition.
October 22nd, 2011 at 6:45 pm
Just noticed that new images are correctly positioned (or it’s just too fast for me to notice) with:
defaultTransitionDuration: 0,
October 25th, 2011 at 3:31 pm
I found display problems with images and text rendering, while using IE(not all IE on different pc).
screenshot here: “error.png” http://vdisk.weibo.com/s/Vb9o
please keep updating. thank you.
October 26th, 2011 at 3:47 am
Hi,
The gallery does not correct work with jquery-1.6.2.
what is the little problem?
October 26th, 2011 at 9:06 pm
Preciso fazer com que a galeria carregue a miniatura por paginação Ex. 50 páginas o visitante quer ver a página 1 (automático) e clicou na página 20 depois na página 22 como seria o código para que so sejá gerada a miniatura da página 1, 20 e 22. Lembrando que utilizo ela dinamicamente com uma função PHP para pegar todas as imagens de uma pasta.
October 27th, 2011 at 8:43 pm
I’m sure I’m missing something simple…. I love the gallery but wanted to swap the placement of the thumbnails and main image. Basically I’m just using the simple design but want the thumbnails on the right instead of the left of the image. Can you help me out? Thanks.
October 27th, 2011 at 9:32 pm
HA! Never mind. I just figured out the correct css entry.
October 28th, 2011 at 9:07 am
I want the images to scale down to fit its parent container.
If they are smaller than parent container, they should be displayed centered.
Is this possible? If yes, can you brief me how?
October 29th, 2011 at 7:24 pm
Trying to reduce the number of thumbnails per page, and looking at the js, and set:
numThumbs: 20, // The number of thumbnails to show page
I tried reducing this to 6, but nothing happened.
Is there a way to do this?
October 29th, 2011 at 7:59 pm
Oh, got it – it’s in the bottom of the page.
October 31st, 2011 at 6:36 am
I have a big problem. I’m trying to use the plug-in Galleriffic along with the plug-in JScrollPane, which creates a custom vertical scrollbar to the thumbs. The problem is that at the time the page is loaded, the scrollbar does not appear. Plus, the other plug-in that lets you move the mouse with the thumbs is also dead. Everything just works perfectly when I select the url and press Enter.
Is there any incompatibility between these plug-ins? What might be happening?
The page is: http://www.mvgweb.com.br/transversal/port/galeria
October 31st, 2011 at 9:25 pm
I have a problem using this when the page has the tag in the head, any idea how to fix this?
October 31st, 2011 at 9:26 pm
base href= tag, comments ate it first time
November 1st, 2011 at 3:59 am
This gallery looks great but in Internet Explorer the images are floating to the top, I would like to see them centered if possible.
Anyone a solution?
November 1st, 2011 at 1:20 pm
I used Galleriffic plugins this is very simple and lovely. Thanks
November 3rd, 2011 at 7:30 am
Hi. i cannot really seem to make it apply a specific css class to the big image. does anyone know how to do this. without messing with the source ?
November 4th, 2011 at 1:30 pm
First off great plugin, I love it! My question has to do with removing and adding images. I know you have the functionality to add and remove one at a time but what about sets of images, possibly identified by a class? I’ve been trying to do different things but have yet to be successful. Anything you could tell me would be much appreciated, thanks!
November 4th, 2011 at 3:00 pm
What about reinitializing the gallery, how would I go about doing that? Say I use the function removeImageByIndexLink to remove an image, how can I reset the gallery to put it back to normal.
November 5th, 2011 at 6:26 pm
link to a specific image
how to link from external site to a specific image in a gallery?
TIA
November 7th, 2011 at 6:26 am
i try insert other hyperlink in slideshow container instead of ‘next image’, what should i edit?
November 8th, 2011 at 3:44 am
Hi! Super thanks for this. Just what I was looking for. But I always make it difficult for myself.. Hoping you or anyone else can help me.
I am trying to make my gallerific code work with my wordpress theme.
The issue I got is that I want a second row of larger thumbnails that is infact single posts. They are fetched by their category and that all works fine.
What I want is when you click the larger thumnail(the post) is that it should link to the actual post content but show up in the gallery. Makes sense?
Whan I’m done with the theme I want the user (my client) to understand how to get his posts up easily. So I have put all the info from one item, in this case it is a furniture, inside only one post. That means that I have all my pictures for the furniture and all the text inside this post.
I do however get the first post to show up inside the gallery but that is only when I call the query
if ( is_page(‘products’)){
rewind_posts();
query_posts(‘cat=3&showposts=1′);
include(TEMPLATEPATH . ‘/loopproducts.php’);//This is where the gallery is
wp_reset_query(); ?>
}
But when I do this the gallery doesn’t connect to my post..
If anyone has even the tinyest pice of edvice I would be forever greatful.
November 8th, 2011 at 8:32 pm
Hi. I found that example 4 (the one with insert and remove images after initialization) doesn’t work in IE, got an error saying ‘e’ is undefined. Hope you could look into it. thanks.
November 10th, 2011 at 3:29 pm
I’m using the simple layout. How do I get rid of the “loading” graphic that shows up where the image is during image transitions???
Thanks!
November 10th, 2011 at 9:25 pm
How do I use this gallery without having a flickr account? I host my own photos.
November 15th, 2011 at 10:57 am
Hello!
I’ve needed to set width for slides so they fit into my design (I have images of various sizes, many of them are too big to display).
So I’ve added my own option so I could avoid messing with CSS, here it is:
Line 88:
syncTransitions: false,
imageCustomWidth: false,
defaultTransitionDuration: 1000,
Line 613:
image.src = imageData.slideUrl;
if(this.imageCustomWidth!==false) image.width = this.imageCustomWidth;
}
If this is wrong place, please tell me where can I post it.
Best regards, Peter.
November 15th, 2011 at 11:12 am
Would forgot about one line.
Line 339:
image.src = imageData.slideUrl;
if(this.imageCustomWidth!==false) image.width = this.imageCustomWidth;
return this;
All of these have been tested on version 2.0.1
November 16th, 2011 at 12:58 pm
Is it possible (or will it be in the future) to load a movie by clicking a thumbnail?
November 16th, 2011 at 8:44 pm
I useing “Galleriffic ” in an information page of my web.
http://www.t2.x0.com/
But, a bug occurs when I click an image quickly.(An image multiplies the error.)
How should I make modifications?
November 22nd, 2011 at 8:35 pm
Hi there,
I`m using your plugin, and it is amazing, I love it.
But I`m having a little problem. My gallery just show 24 images same number as your demo. How do I make it unlimited? I know that I can set the maximum number of pages, it`s set as default for 7 pages, but it just show 2 pages. If u can help will be wonderful.
Thanks a lot
Carlos
November 22nd, 2011 at 8:58 pm
Nice plugin but I think I found a bug. If you set..
syncTransitions: false,
..and then dubbel-click an image all images in “slideshow-container” will dubble..
Any solutions?
November 23rd, 2011 at 5:13 am
There is a problem while using this plugin for example with asp.net this line
scramble the positions of the thumbs, why this could happen and how can we resolve this without of course deleteing the DOCTYPE
TIA
November 23rd, 2011 at 5:14 am
DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”
this line moved from the previous post of mine
November 30th, 2011 at 9:40 am
Hi, thanks a lot for the image gallery, it works great and looks amazing!
I have it embedded in my portfolio site, just vaguely different, and used my inexperienced programming style to change a few of the preset parameters.
I do though, need a little help. One thing I changed is the fact that I have different projects and multiple pictures & texts attached to that specific one project. In short: I use 1 thumbnail to show a project, and clicking on the main picture cycles through the images and texts contained within that project, without going to the next thumb – or project. After the cycle is completed it jumps to the next project.
I just deleted the thumbnail reference within the page’s html code in order to do that.
If you have no idea what I’m about, please visit http://www.rikkertjan.nl/industrial%20design%20and%20engineering.html ! – and start clicking on the main picture.
Now, what I would like to do is to provide a link (i.e. within the text) to a specific leaf: as far as I can tell, the reference to that is ‘pagename’.html#x (with the x being a specific number). But when I link to that it won’t actually jump to that specific “leaf” unfortunately. Is it even possible? Please help!
Sincerely,
Jonas
December 2nd, 2011 at 2:44 am
I’d love to install the Gallerific plugin on my WP site but need a little coaching. Advisement would be a HUGE help.
mucho thancho,
Laurie
December 6th, 2011 at 6:23 am
love it too but how can i make the slideshow start from a random image ? i.e. not the first one ?
December 6th, 2011 at 8:56 am
I need to retrieve the URL of the main slide. Any ideas before I go cut and slice the js file? Or if it’s already possible, how?!
December 7th, 2011 at 4:49 am
So I just cut in the code and change a few things. Works now. If anyone else needs it.
Change the “gotoImage”.Make it return the slideUrl aswell(Or just give it all imageData).
Then on the frontend use the onSlideChange:
onSlideChange: function(prevIndex, nextIndex, slideUrl){
var imgUrlField = document.getElementsByName(‘_I’);
imgUrlField.value = slideUrl;
},
gotoImage: function(imageData) {
var index = imageData.index;
if (this.onSlideChange)
this.onSlideChange(this.currentImage.index, index, imageData.slideUrl);
this.currentImage = imageData;
this.preloadRelocate(index);
this.refresh();
return this;
},
December 7th, 2011 at 12:20 pm
I really like the gallery you’ve created. I have two questions though. First, is it possible to add a full screen slide show button? And second, is there a way to add auto generated numbering under each thumbnail?
Keep up the great work!
December 13th, 2011 at 12:19 am
Hi I want to pause and play slideshow by external anchor tag or div. How could i achieve it.
December 15th, 2011 at 9:42 pm
Does Galleriffic 2.0.1 work with any jQuery version above 1.3.2?
December 16th, 2011 at 4:36 pm
Hi, I am using Galleriffic in my site (http://www.scripta-paroledaindossare.it/galleria_coll.html), a little modified in CSS, but a problem is occurring when I use prev & succ command (in my site “Foto Precedente” and “Foto Successiva”): it jumps two by two images. What could it be ?
December 17th, 2011 at 12:46 pm
Is a way to change the defaults such as number of thumbnails after initialisation?
e.g.
$(‘.changeTo16′).live(‘click’, function(){
//set gallerific stuff
numThumbs: 16
});
$(‘.changeTo8′).live(‘click’, function(){
//set gallerific stuff
numThumbs: 8
});
etc…
December 21st, 2011 at 9:58 am
Hi !
I’ve used your plugin in a website and I have a problem…
I have a list of colors with iamges related to the colors, like that :
Next to that, I have 3 links. When I click on “link1″, the first item of the list take the “active” class and the other items of the list are set to “display:none”.
If I click on “link2″, the second item of the list take the “active” class and the other items of the list are set to “display:none”.
So my slideshow div display the pictures of active list item. I’ve done it like that :
$(‘#filterOptions li a’).click(function() {
var gallery = $(‘#list_colors li.active’).children(‘div.id-thumbs’).galleriffic({
delay: 2500,
numThumbs: 100,
preloadAhead: -1,
enableTopPager: false,
enableBottomPager: false,
maxPagesToShow: 7,
imageContainerSel: ‘#slideshow’,
renderSSControls: false,
renderNavControls: false,
playLinkText: ”,
pauseLinkText: ”,
prevLinkText: ”,
nextLinkText: ”,
nextPageLinkText: ”,
prevPageLinkText: ”,
enableHistory: false,
enableKeyboardNavigation: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
});
return false;
});
When I click on “link1″, the slideshow is related to the first list item. It works to for the second list item. But when I click on a link for the second time, the slideshow doesn’t display… And when I inspect the html, there is nothing inside
Here is the page where I have the problem, click on the color splash under the “colors” title.
http://cluster003.ovh.net/~oxygenese/blog/products/tshirt-bta/
Thanks and sorry for my bad english…
December 22nd, 2011 at 2:25 pm
Hello, the plugin works great! Is there a way to disable the fading transition when browsing images?
December 24th, 2011 at 12:19 am
hi,
This plugin is very great.!
but i have some problems to implement 2 set of gallery in same page.
how can i implement 2 different types of gallery in same page like actor gallery and actress gallery ?
December 26th, 2011 at 5:40 pm
hey great script, how do i go about resizing the image thats being displayed on the right. im using script 1.3.2. its been driving me insane. thanks
December 29th, 2011 at 4:51 pm
I have been examinating out some of your stories and i can state pretty nice stuff. I will definitely bookmark your site.
January 6th, 2012 at 12:58 am
The History plugin does not work. When it is true, the history is stored in the web’s URL however, the slideshow stops working. So the history causes the slideshow to stop changing pictures.
January 6th, 2012 at 7:31 pm
Where I can I change div properties and general style changes? For example, changing the highlighted box color from black to orange, or taking it away completely. I’m looking to customize the look a bit. Thank you so much! It is really wonderful!