IntroductionWhen defining the Galleria plugin, you can define some options to customize your gallery. All of the options are what they should be - optional. DetailsAt the moment, there are five options you can send to the plugin: insert(String) Selector of container in your markup where you want Galleria to inject the main image and caption. If no selector is defined or if the script can't find it in the source code, a new division will be created with the class name galleria_container before the unordered list in your markup. history(Boolean) A booelan value for activating the history object. If true, the back button will take you to the previous image and a unique URL will be created for each image, without reloading the browser window. Default: true. clickNext(Boolean) A boolean helper to make the main image clickable for easy browsing to the next image. Default: true. onImage (image,caption,thumb)(function) Here you can define what you want should happen to your image, caption and thumbnail when it's showing. F.ex image.css('display','none').fadeIn(); will fade in each image that is being viewed. All variables are jQuery objects. onThumb (thumb)(function) Same thing as onImage, but here you can decide what you think should happen to each thumbnail when it shows up.
How toYou define your options like this (example): var options = {
insert : '#main_image',
history : false,
onImage : function() {},
onThumb : function() {},
};
$('ul').galleria(options);
|
Sign in to add a comment
Could you explain how to get the first image to display initialy please? at the moment from the how-to on your galeria page you have to click on a thumb before any images show up.
Thanks
I am also looking for the answer to what willijbarker asked. I'm trying to add it to a template which is based on the demo 2.
I'm not a JQuery expert. But I fixed the inital load problem this way:
Added: $('#gallery > li:first').addClass('active'); (My <ul> has an id of gallery)
Then in jquery.galleria.js, line 318:
} else {
Works for me :)
Is it possible to display the image on rollover instead of click?
Yes, I was wondering the same thing as ajstocco. Is it possible to have the main image update when you hover over the thumbnails?
Yes, in "galleria.js" line 179, replace :
thumb.click(function() {
thumb.hover(function() {Is there a way to make the slideshow autoplay? Thanks!
willjbarker: <li class="active"><img.. instead of <li><img class="active"...
works for me
Here is another way to select the first image without modifying the plugin code. After calling .galleria() insert the following:
i'd love to see an automatic progression through the list too... thanks for a great gallery script!
I'm sure this is something I missed regarding CSS, but how to I position the thumbs? Specifically, how do I create a z-index so that they are on top of the image? Thanks in advance.
I like this gallery very much, but i have some difficulties to get the first image initialy. I tried the suggestion above, but none of them i get to work. I'm a n00b with this, so i do probably something wrong. I can't find <li><img class="active" for example. Or in wich document i have to put the line from eric.appel? thanks for your effort.
Initial image load: In your HTML you should have a UL list with LI items each having an IMG element. For the image that you wish to load initially, add a class to the LI item, like this:
<li class="active"><img ....etc....></li>
Works for me.
Does anyone know how to place the thumbnails above the main image?
I do the <li class="active"><img ....etc....></li> thing and works perfect in firefox and safari... but is not working in IE!
Does anyone have the same problem?
I really need this gallery to autoplay... did any of you solved this??
It does not work -> class="active" in Firefox 3. I use class="noscale". Could you explain how to get the first image to display initialy?
Thanks.