Galleria - a Javascript Image Gallery

271 comments so far | Add yours

271 Responses so far. Add yours.

At 8:04 am on February 14th, 2008 , Tor Løvskogen wrote:

Great stuff! I agree that just loading the next image is useless.

At 1:51 am on February 15th, 2008 , Bruce wrote:

This is terrific - I particularly like the flexibility of not having to have the images all the same size.

Question - how can I alter the css to get 3 columns of thumbnails? My fluency in reading css has let me down.

Cheers/Bruce

At 2:03 am on February 15th, 2008 , David Hellsing (author) wrote:

@bruce: sure you can. Just increase the width of the containing ul until the containing list elements fit in three columns. In the demo it’s the .gallery_demo{width:240px;} rule.

At 3:45 pm on February 15th, 2008 , Bechlegor wrote:

Thanks for your gallery, it works great.
I have only w few suggestions:
1. div with the main image is absolute positioned. How can I change this (and is it possible), I want to have a gallery scrolled on my page.
2. In gallery js code “img”, “a” elements inside “li” are searched using JQuery children function, so they must be direct children of the “li” element. Maybe a better would be to use “find” instead of “children”, because sometimes there can be other transparent tags (eg. span, div or other non-html tag) between li and img, eg:

At 5:31 pm on February 15th, 2008 , Rob wrote:

Hi

Nice gallery. One question - Is it possible to have the first large image appear, rather than having to click a thumb first to display an image?

Rob

At 5:56 pm on February 15th, 2008 , Bechlegor wrote:

Ok, I have found a solution for my problem 1, so forget about it

At 6:01 pm on February 15th, 2008 , David (author) wrote:

@Bechlegor:

1. In the next version (0.9.1), you can specify an insertId string. The script will grab the id and insert the main image there instead. Then you can position it as you wish via CSS and place it anywhere you want in the HTML source.

2. You are absolutely right, and I have already corrected this in the next version. I’ll put the project on google code soon so you can use the latest revision instead. I will notify when the next release is ready here as well.

@Rob: just put class=”active” on the first list element (or any element you want to display first) in the HTML. See demo2 as an example.

At 6:02 pm on February 15th, 2008 , David (author) wrote:

@Bechlegor: sorry, I missed your last comment. How did you solve it?

At 8:05 pm on February 15th, 2008 , Bechlegor wrote:

Ad.1. I thought that this div is positioned absolutely in context (related to) of the whole page. My another mistake was that I’ve mixed up position:absolute with position:fixed ;). But now I see that this “div” can be positioned related to gallery “ul” element. Example is in your demo page: .gallery_demo li div{left:240px}. So I can have more than one gallery per page and each gallery main picture will be shown eg. left:10px;top:90px related to the current gallery “ul” element.
But of course a solution with insertId would be more flexible :).
Ad.2. I’ll be waiting for this fix (and that with insertId too). Thanks!

At 8:12 pm on February 16th, 2008 , Bojan Mihelac wrote:

Hi David, really nice work!

I found one smaller bug that prevents gallery working with custom thumbnails - on line 139 of jquery.galleria-0.9.js attribute should be set throught object and not argument list:

// .attr(’title’, _container.children(’a').attr(’title’)); //

Bojan

At 8:13 pm on February 16th, 2008 , Bojan Mihelac wrote:

Sorry for formatting, in line 139 it should be:

.attr({title: _container.children(’a').attr(’title’)});

instead of:

.attr(’title’, _container.children(’a').attr(’title’));

At 2:00 am on February 17th, 2008 , Christy wrote:

Awesome…this is what I have been looking for - I do NOT have the time to be designing separate html pages for each gallery photo. Thank you!

At 6:58 pm on February 17th, 2008 , Stephen wrote:

I’ve looked through all the jQquery galleries and tried a number of them and this is by far the best! Excellent work!

At 9:03 pm on February 19th, 2008 , Mike wrote:

Great work! Thank you very much!

At 10:02 pm on February 19th, 2008 , James White wrote:

This is great, any chance someone can give me a hint on how to change the function so that hovering is the trigger to display the image?

At 10:10 pm on February 19th, 2008 , David Hellsing (author) wrote:

@James:

Look for:
_thumb.click(function() {
_container.siblings(’.active’).removeClass(’active’);
_container.addClass(’active’);
});

And replace with something like:

_thumb.onmouseover(function(){ _container.siblings(’.active’).removeClass(’active’);
_container.addClass(’active’);
});

At 11:16 pm on February 19th, 2008 , James White wrote:

Yay, you rock! Thanks!

At 11:57 pm on February 19th, 2008 , Benj wrote:

How would we link the main image and title for each item?

At 12:40 am on February 20th, 2008 , David Hellsing (author) wrote:

@Benj: how do you mean?

At 6:29 pm on February 20th, 2008 , Jeroen Smeets wrote:

Hi David, great idea and excellent work! Easy to work with and expand.

I would like to make a suggestion: can you add an option for controlling the thumbnail? If you take a look at http://jeroensmeets.net/photo/maud (under construction as always), the 3rd image is the coat of my daughter. Would be nice if I could specify to use the top or bottom part of the image for the thumbnail.

At 6:40 pm on February 20th, 2008 , David Hellsing (author) wrote:

@Jeroen: The thumbnail is centered in it’s container using a negative topMargin and leftMargin. So try altering the top and left values for the image. Something like img.thumb{top:-10px} should make a difference.

At 8:43 pm on February 20th, 2008 , Ty (tzmedia) wrote:

Awesome gallery and documentation David.
The plugin’s are skyrocketing over there at the new subdomain:
http://plugins.jquery.com/
I’m finding lot’s of old friends, and making plenty of new ones. Plugin authors are just great people.
Now what can we do about that SG?

Thanks,
ty

At 9:55 pm on February 20th, 2008 , Jeroen Smeets wrote:

@David: thanks for your reply — your solution would change all the thumbnails on the page, I’m trying to adjust just one. Any ideas?

At 10:19 pm on February 20th, 2008 , David Hellsing (author) wrote:

@Jeroen: add the style inline to the list or target a specific class or id via CSS, ex:

CSS:
#lesstop img{top:-10px)

HTML:
<li id="lesstop"><img src="{src}"></li>
OR:
<li><img style="top:-10px" src="{src}"></li>

etc…

At 11:58 pm on February 20th, 2008 , Jeroen Smeets wrote:

@David: that put me in the right direction for my solution, thanks.

At 6:46 pm on February 22nd, 2008 , Jack wrote:

Nice. I think I’m going to try this with a webcomic. I’m currently using some PHP/Javascript homebrew nightmare. This looks much more polished, and the fact the browser buttons work makes it that much more attractive.

At 9:08 pm on February 22nd, 2008 , Jack wrote:

Is there anyway to keep the page from “jumping” when fades are used? That is, if I’ve scrolled down, and I click the next image, the scrollbar resets, but only if fades are turned on. Is there any way around this? The fades are attractive, but that jumping is almost a dealbreaker.

At 12:31 pm on February 23rd, 2008 , David (author) wrote:

@Jack, it’s probably the #hash and not the fade() that is causing the jump. Did you try to set history to false? If you have a live example somewhere, I could have a look.

At 4:57 pm on February 24th, 2008 , Jack wrote:

Thanks David. I’ll look into that. Congrats to you (and the jQuery devs) for very readable code. I was able to modify it easily to add an option to specify an id or class for the caption so that I could move it anywhere I wanted, keeping the default behavior. I was also looking into an alternate way to specify the caption (maybe as a span inside the li that gets removed later?). The problem with specifying the caption in a title attribute is that that disallows any HTML markup.

At 6:11 pm on February 24th, 2008 , Jack wrote:

Sorry to post repeatedly, but I actually found an easy workaround here. I encoded the html special characters in the title using their html code equivalents (I used the php function htmlspecialchars(), and there’s probably a Javascript equivalent) and then replace the call to the jquery function ‘text’ with the jquery function ‘html’ in the galleria script. Worked like a charm, and it validates! I’ll send you a live example ASAP.

At 7:16 pm on February 26th, 2008 , Ty (tzmedia) wrote:

What about aspect ratios, landscape vs. portrait orientation.
Is it possible to have say the fancier demo 1 with aspect ratios of both types. The portrait images may be taller also.
Would that make the whole thing jump around, or do all images need to be the same size plain and simple?
More questions than answers.
jsChallenged

At 10:27 pm on February 26th, 2008 , David Hellsing (author) wrote:

@TY, sure you can have different image sizes and aspect ratios. Of course, it will have consequences if you position your container relative to other elements, like text and thumbnails since the container will shrink to fit it’s containing image. To avoid that, the smartest thing would probably be to manually calculate a max-height/max-width of all the images you intend to display and then give the container that height/width using CSS. Or, you can position the container absolute. You could even position it in front of the page, lightbox-style if that’s what you prefer.

I would not recommend to let CSS or JS do the scaling to fit when displaying large images. It works ok for thumbnails (especially on a mac), but you can easily spot the rough resize calculations in bigger sizes.

At 11:07 pm on February 26th, 2008 , Ty (tzmedia) wrote:

Thanks David,
Good to know, I went ahead and cropped the images I had to work with. Here’s a resized version aprox 525px wide, and room for 7-thumbs beneath it. Also relocated the nav to above the thumbs, just in case someone was viewing with an 800×600 setting.There will be maybe 5 to 6 rows of thumbnails, working great!
http://70.133.226.228/galleria/galleria-1.htm

At 11:54 pm on February 26th, 2008 , Ty (tzmedia) wrote:

What’s providing the opacity setting for the inactive thumbnails? It’s a little too light on white:
http://70.133.226.228/photoGallery.htm
Tried switching what I thought it was, didn’t see any changes.
thanks.

At 11:59 pm on February 26th, 2008 , Ty (tzmedia) wrote:

Switching the background back to #000 as it was helped.
For:
.gallery_demo li
{…
background:#000;}

At 12:10 am on February 27th, 2008 , David Hellsing (author) wrote:

@Ty: in your case, look for the :

var _fadeTo = _li.is(’.active’) ? ‘1′ : ‘0.3‘;

and:

_li.not(’.active’).children(’img’).fadeTo(’fast’,0.3);

… when you set the onThumb function (not in the galleria file).

At 2:34 pm on February 27th, 2008 , TEG wrote:

First I would thank you for a great site.

Then I have a quieston about the numbers of images. Let say you have 30 picture in the gallery, the thumbgallery would be on many lines. Would it be better to create a “Carousel” so the thumbgallery would be just on one line?

At 3:22 pm on February 27th, 2008 , Soigneux wrote:

Awesome gallery!

When having large images that you don’t want to resize in advance and that is larger than the display zone(making the image go outside the box) - how does one resize the image.

I understand there is a way with css but the result isn’t great. Still, how does one do that? I’ve tried overflow:hidden; but that doesn’t resize - it just crops…

Any ideas?

In advance - thanks:-)

At 5:38 am on February 29th, 2008 , Anthony wrote:

is it possible to skip the image thumbnails altogether and use actual test links?

At 1:44 pm on February 29th, 2008 , Nic wrote:

I’m busy implementing Galleria 1.0b and loving the logical approach. One small “issue”, I suspect with the history module: If I load http://www.domain.com/gallery.php#image6.jpg directly from the browser address bar (as if bookmarked), Firefox (2.0.0.12) selects and displays the correct image as expected, but if I do this in IE (6.0.2900.2180 and 7.0.5730.11), no image is loaded.

As a side effect, if you default the first image in the gallery to display by using the “active” class name, Firefox correctly overrides this active image with the one from history whereas IE doesn’t.

Does anyone have any suggestions on where to start looking…Or should this be listed on google code as a bug?

Thanks in advance.

At 1:53 pm on February 29th, 2008 , Nic wrote:

I am busy implementing Galleria 1.0b and loving the logic of it.

I am trying to use the history object to make individual photos book markable. When I open my gallery page directly with a url (as if from a bookmark) with a resource tag, say http://www.domain.com/gallery.php#image6.jpg, it works 100% in Firefox (2.0.0.12), but not in IE (6.0.2900.2180 and 7.0.5730.11).

IE for some reason does not load the picture. As a side effect, if I mark an image as the default to automatically load by using the “active” call name, FF overrides this the tag from the url, whereas IE does not.

Does anyone have any suggestions and where to start sorting this out? Or is this a bug that should be reported on google code?

Thanks in advance, Nic.

At 7:16 pm on March 1st, 2008 , David Hellsing (author) wrote:

@Soigneux:
Scaling images in CSS is quite easy in theory. Just add a fixed width or height property for the img element and set the other to ‘auto’. As an example, img{height:400px;width:auto} will force the image to be 400px high and will adjust the width according to it’s original poroportions.

@Anthony:
I suppose it is. You could probably do it in the onThumb function by replacing the image element with a text, f.ex the title attribute. But it wouldn’t be very effective.

@Nic:
That sounds strange. I couldn’t reproduce the problem so you are welcome to post it on the google code site and I’ll look into it.

At 9:54 pm on March 1st, 2008 , Jack wrote:

I’ve used a modified version of Galleria here:

http://www.fadecomic.com/read_issue.php

At 8:29 am on March 3rd, 2008 , nic wrote:

@David,

Firstly, sorry about the multiple posts - you captcha system was serving “invalid images”, so I attempted to submit more than once.

Regarding my problem: When I thought I couldn’t post here, I started to log an issue on google code. I wanted a public example to reference, so I tried with Demo 1 (http://www.monc.se/galleria/demo/demo_01.htm) and lo and behold it worked correctly. A short bit of head scratching gave me the root of the problem - most of my images have spaces in the file name… Bookmarking those images doesn’t work in IE. My images without spaces in the file name work 100%

I didn’t feel it justified a complaint for that problem. Thanks for your concern.

At 10:31 am on March 4th, 2008 , Nic wrote:

@David,

Just to clarify, I have defined the problem better. It is a combination of IE and image files with spaces in their file names that is displaying this problem, even if they are “%20″ encoded.

It is therefore very easy to work around, and besides, I don’t think a URL should contain spaces anyway!

Thanks, Nic

P.S. Your captcha system seems to be serving “invalid” images. Post is a bit hit an miss.

At 6:48 pm on March 6th, 2008 , zigi wrote:

Hi,
Amazing stuff!
I have a “speed” issue, the “fades” are very slow and the page it self as well, any idea how to solve this?

Thx in advance
zigi

At 6:55 pm on March 6th, 2008 , Paul wrote:

You mentioned using a ‘lightbox’ component to display the full-sized images. How would would I achieve this effect using the latest lightbox2.0 or lightwindow scripts? Suggestions? Thanks.

At 6:59 pm on March 6th, 2008 , David Hellsing (author) wrote:

@zigi: FF/win doesn’t do javascript fades very good. Try speeding things up by increasing the fade vales. The page itself is not slow, but loading each image can be, if they are big and you are on a limited connection. But when they are loaded as a thumb, it’s also fully loaded in the cache.

@Paul: I don’t really know how to integrate an existing lightbox component, I was thinking more theoretically. If you position the galleria_container absolute in the center of the viewport, and then add a background shade using png or whatever onLoad, it would have about the same effect. I’ll look into integrating lightbox when I have more time on my hands.

At 7:09 pm on March 6th, 2008 , Paul wrote:

Thanks for the quick response David.

Do you know off hand how to call a background shade when the image loads? Well, I guess I would have to figure out how to close large images that popup much like LightBox does … hmm - looks like more trouble than it’s worth. Anyways, I enjoyed your Galleria, thanks.

At 7:16 pm on March 6th, 2008 , David Hellsing (author) wrote:

@Paul: the lightbox component must have a trigger, if nothing else I assume it’s inside a click event. Connect that to the onImage function when you define galleria and you should be pretty close.

Anyway: the onImage() function is called every time the image is displayed, so that’s where your custom behavior should be inserted.

At 2:05 am on March 7th, 2008 , Nick Pannuto wrote:

Hey bro, great product, just now getting into it, but a problem has arisen, I’m in crunchtime right now (as a lone developer) and we need shit to get done and I need help tearing apart your code to make it do what I want. You have my email, I need you to email me ASAP so I can talk to you about this further. You’ll be paid obviously.

At 2:59 am on March 7th, 2008 , Paul wrote:

Can anyone suggest a solution for using a lightbox effect with this script? I’m not sure how to tackle this sort of thing. Refer to David’s previous replies for suggestions.

Would love to see that possible - Thanks in advance!

At 4:24 pm on March 7th, 2008 , Ty (tzmedia) wrote:

I’m thinking of using this script as a gallery for EE, with the core version you don’t get the gallery module.
This would be great just as a sort of general upload gallery to see what all is in a directory, as it is easy to set up different upload directories with the core EE version.
The best lightbox for jquery I’ve found is:
http://jquery.com/demo/thickbox/
Perhaps putting in your requests with Cody Lindley on that one, or joining the jQuery users group will get a version of a lightbox up and running.
http://groups.google.com/group/jquery-en?hl=en

Thanks again to David for a great script!

At 4:31 pm on March 7th, 2008 , Ty wrote:

@Nick:
Are you sure that you can afford Mr. Hellsing?
Good luck with your project.

At 6:31 pm on March 7th, 2008 , Nick Pannuto wrote:

@Ty:
I’m not looking to have him do the whole site, I’m just paying him to, in a way, teach me how to position things the way I’d like them to be.

Thanks. I’ll be sure to post back here when I get it figured out!

At 6:40 pm on March 7th, 2008 , Ty wrote:

Thanks Nick.
David’s been doing a great job of looking out here, glad you were able to get him on board to help you out with your project.
I’ld of volunteered myself, but I’m just kind of a hack copy-paster when it comes to implementing customizations.
Love to see your version, when you get it knocked out.

At 7:22 am on March 8th, 2008 , Stephen Clark wrote:

What would be exceptionally cool would be to use the Carousel JS so that if you have 20/30/50 images, the thumbnails would scroll left to right under the larger image.

At 9:06 pm on March 8th, 2008 , zigi wrote:

Thank you David for the response !
I will try your solution
Peace

At 7:10 am on March 9th, 2008 , Dinesh Vadhia wrote:

Thought you might be interested in PicLens from a new startup in Menlo Park, CA called Coolris that is getting some rave reviews for its ‘beyond the browser’ technology: http://www.piclens.com/site/firefox/win/

I wonder how long before some bright sparks in the JQuery community develop something similar but open source?

Cheers

Dinesh

At 8:26 pm on March 9th, 2008 , Nick Pannuto wrote:

Piclens is pretty impressive, but I think it’s bloated for having the need of a browser extension.

Now that the browsers are actually competing to innovate again, I would expect to see something like this achievable in ffx3 with canvas.

At 9:14 pm on March 9th, 2008 , vic wrote:

Awesome script! I’m looking to manually add a direct link to each specific image underneath the description in the html code. Is there a way to achieve this?

Thanks!

At 9:26 pm on March 9th, 2008 , Nick Pannuto wrote:

well if you’re doing it manually you can just click on the picture and copy the link to it (the #/imagepath/img.jpg is what determines this)

At 1:28 am on March 10th, 2008 , vic wrote:

Thanks for the response Nick, but I’m trying to add the link to the photo in the tags and it’s not showing up.

Ex: Direct link: http://directlinktoimage.com

At 1:31 am on March 10th, 2008 , vic wrote:

Just realized that the html is not showing.

[code]Direct Link:http://directlinktoimage.com[/code]

At 2:32 am on March 10th, 2008 , Nick Pannuto wrote:

No idea what you mean vic, do you have an actual site I can look at to see what’s going on?

At 12:16 pm on March 10th, 2008 , Rob wrote:

Great plugin, i only wish it would have some form of crossfade between images, anyone know how to accomplish this?

At 8:46 pm on March 10th, 2008 , vic wrote:

Nick,

Sorry it seems that the html code was excluded in my last post. I’ve uploaded an image to my server to show what I mean. I would like to display, if possible, the direct link to the image with each image. Doesn’t haven’t to be automatically inserted, I can add it manually. Here’s the image:

http://www.visualvandal.com/wip/galleria.jpg

At 7:10 am on March 11th, 2008 , Perry wrote:

Nick, if you look at line 309, this is where you would need to make changes if you want to add extra markup to the caption.

I had to change:

_wrapper.siblings('.caption').text(_thumb.attr('title'));

to this:

_wrapper.siblings('.caption').html(unescape(_thumb.attr('longdesc')));


Don’t ask about the ‘longdesc’. I just needed some kind of element that wasn’t alt or title to store the caption (in my case, actually an image).

At 7:12 am on March 11th, 2008 , Perry wrote:

er, vic, not Nick. It’s getting late

At 7:36 am on March 11th, 2008 , vic wrote:

Awesome. Exactly what I needed. Thanks!

At 5:18 pm on March 11th, 2008 , Jack wrote:

Right. That’s what I was talking about above. I made a similar change (I used the php function htmlspecialchar so that the page would validate). I would go so far as to suggest that the line be officially changed from “text” to “html”. I also added the ability to specify a caption container so that I could move it where I liked. You can find my modified version here:

http://www.fadecomic.com/jquery.galleria.js

At 9:44 pm on March 12th, 2008 , Sean wrote:

I’m using this gallery plugin with the JQuery UI Tabs plugin. Nothing shows up in the gallery, just blank boxes were the thumbs should be. When I comment out the Tabs plugin all is fine, any ideas?

At 9:51 pm on March 12th, 2008 , Paul wrote:

Any updates on the LightBox functionality?

Was hoping to display the full image in a overlaying LightBox when you click on a thumbnail… instead of changing the image in the container as it currently does.

Ideas?

At 10:21 am on March 13th, 2008 , Steven Hambleton wrote:

Hi and great plugin!

Is it possible to have multiple versions of this running on the same page?

I am running a resort site with multiple room types and the client wants them to be able to view the pics for each room type but in their own section on the page.

At 5:33 pm on March 14th, 2008 , Melody wrote:

Hello,

Great gallery and thank you for sharing it! Any idea how to stop the gallery from flashing off for a moment on loading (or reloading) in Safari? I’m on a Mac. It works fine in Firefox.

gracias.

At 7:34 pm on March 14th, 2008 , larsen wrote:

Hi David, thanks for your great work! I wanted to skip the image thumbnails altogether, and replace them numbers. “1″ for the first item, “2″ for the next, and so on… Any suggestions?

At 12:36 am on March 15th, 2008 , David wrote:

Hello, thank you for this great gallery. I have a question, is possible to add an effect type carousel? the problem is that I have many thumbnails.

Thank you again

At 3:59 pm on March 17th, 2008 , Andrew Taylor wrote:

Hi, i’m wondering if anyone could help me. I’m trying to use Galleria on my site and am having some issues getting it to behave as i’d like.

First of all, i’d like to have the next/previous links directly below the main image and above the image description or title=”". I’ve played around but i can’t get it to display the links here. I have put an ‘X’ where i’d like the links to appear.

Secondly, i’ve put the gallery in a 540px width container, it’s working as i’d hoped but one of the thumb nails has been cut off. If anyone could offer some help i’d really apreciate it.

Here is the screen shot of how the gallery is diplaying:

http://www.druting.co.uk/gallery_screenshot.jpg

At 6:06 am on March 18th, 2008 , Alex Wilson wrote:

Galleria is awesome, I’m so glad I found it!

I’m now currently working on a ZenPhoto theme using Galleria.

Thanks so much for creating and sharing this!

At 6:54 am on March 18th, 2008 , nk wrote:

First of all …. great work and thanks for sharing.

I’m having a similar problem to Sean. I’m trying to use Galleria with the jquery ui tabs. If Galleria is in the active tab when the page loads the thumbnails show up and work. If Galleria is in one of the inactive tabs when the page loads, the thumbnails do not load. All that is seen is the borders of the thumbnails.

At 3:32 am on March 19th, 2008 , mike wrote:

hey there - i’ve tried countless light-whatevers and keep running into the same problem with IE7. i’m opening up the gallery through the lightwindow iframe method and what seems to be happening during the loading of the gallery images is that they are pushing the content out of the frame size of my iframe, which is creating the greyed out scrollbars, once it’s finished loading everything. i’ve even gone so far as to mess around with the scrollbar colors and changing them to black to get rid of those annoying scrollbars, but to no avail. here’s where i’m having problems with …. http://www.dreamgtr.com/dream/ …. click on the gallery and you’ll see this only happens in IE7. ugh. please, anybody help! this site is for a good cause, sniff. thanks much =)

At 3:38 pm on March 19th, 2008 , Ty wrote:

At it’s current size, and without scrollbars your slideshow is unuseable in FF or IE8 beta at 1024×768. You may need to downsize your large photo, or find a new sizing method.
Not sure what else would work.
Once I resized the window, and lost the close link to go back to the website pages at all. Just suggestions.

At 4:24 pm on March 19th, 2008 , mike wrote:

thanks ty… yeah, i thought that’d probably end up being the case. ugh.

At 4:27 pm on March 19th, 2008 , Ty wrote:

Kudos for trying to implement a lightbox, everybody’s been clamoring for it. I don’t design for the 800×600 club anymore, but something like that I would want to be useable for them too. It’s a pity as it limits the size of images.

At 7:39 pm on March 19th, 2008 , Kelso wrote:

Hello, thank you for the gallery, I love it. I would like to be able to display the thumbnails on the left for demo1 instead of under, can anyone help? Thank you!

At 11:36 pm on March 19th, 2008 , Mats wrote:

Hi, very nice library. I am hoping you can help me out with an issue that I have run into. Basically, I am loading images from a database. So the first thing I do is db query via getJSON call to get a list of images (according to some search criteria which is part of the JSON call). This is an async call which then populates the list when results are returned (it’s initially empty). However, this does not seem to work very well with the demo2 code (have not tried demo1). When I hard-code the list in html everything is happy. I have tried to delay the running of the demo2 JS code til after the list is populated but does not seem to help either. Any ideas for how to make this work because I really like this library.

Thanks,

Mats

At 3:23 am on March 20th, 2008 , nk wrote:

I found a workaround for those having trouble getting the thumbnails to work with the Jquery UI tabs library. In using the UI tabs library, set it to load with the tab that contains Galleria as active tab. If you want another tab to be active when the page loads, add a javascript function to change the active tab and call the function with the onload in the body tag. Hope this helps. Worked for me.

At 8:28 pm on March 20th, 2008 , George R. wrote:

I really like this. I’ve used it on my work website and will be using it in an upcoming site. However, I would like the ability to include a link to a URL in the caption. For example, I have a portfolio of sites/graphics I’ve made. For each, I show screen captures of the pages, but would also like to provide a link to that actual site. Is there some how this could be added in the future? Or perhaps there is a way to do it now? I do not know JAVA, but can handle CSS/HTML.

At 7:57 pm on March 21st, 2008 , Thomas wrote:

This lightweight library helped get my simple photo gallery up and running fast. I was wondering if it was possible to extend galleria to embedded flash video objects as well? It’d be great if one could click on a thumbnail and video would display in the galleria.container block. If you can point me in the right direction, I’d like to give it a try implementing it.

At 4:20 am on March 23rd, 2008 , Tim wrote:

Has anyone tried or know how to implement a carousel for the thumbnails? I would like to keep the thumbnails to one line.

At 12:14 pm on March 24th, 2008 , fortyniner wrote:

Hi,

awesome gallery.

But I have a problem im Internet-Explorer. The container is shown above the navigation bar. I already assigned the container a z-index and positioned it absolute but it still does not work.

Using IE Developer Toolbar the z-index for the galleria.wrapper is nonetheless shown to be 0, even though the css comes from .galleria_container which has a z-index of 5.

Help me!

At 12:26 pm on March 24th, 2008 , fortyniner wrote:

Oh,

I forgot the url

www.drhorvath.de/praxis.html

In the meantime I assigned .galleria_wrapper a z-index of 2 but it still does not work

At 8:56 am on March 25th, 2008 , Gazilio wrote:

Clicking prev on the first and next on the last images in gallery throws producing some ungentle action, so
In: next : function()
Add: if(_next)
Before: $.galleria.activate(_next);

In: prev : function()
Add: if(_prev)
Before: $.galleria.activate(_prev);

At 11:52 am on March 25th, 2008 , Kristian wrote:

Hi,
first of all, thanks for giving your knowledge to the public! I have a question about thumb container positioning. How can I position the container (frame) to show the top left corner of the image, and not be centered? I just can’t find the function…please help.

At 6:38 pm on March 25th, 2008 , Tim wrote:

I would like implement the thumbnails as a carousel in order to keep them to one row. Has anyone attempted this?

At 12:08 am on March 26th, 2008 , Tracey G wrote:

Thanks David, this is a great gallery.

I am trying to implement it with tabtastic tabs - a different gallery per tab. All works fine, except that when I use FF and try to toggle between the tabs, nothing loads in the main_image selector (until I then click on a thumbnail).

If you can suggest a way to remedy this I would be grateful. The page in question is http://www.traceygrady.com/2.0/portfolio.html
(please ignore the MOTION tab - this page is still a work in progress)

At 1:13 am on March 26th, 2008 , gaetano carriero wrote:

IO SONO UN ARTISTA

At 8:11 pm on March 27th, 2008 , marianne wrote:

Hello, this is a very nice gallery script. But my question is, what is if i have 100 photos ? i have 100 thumbnails in bottom, and can ever scroll ? is there a way like a slideable thumbsnailer ?

At 11:09 pm on March 29th, 2008 , Brian wrote:

There is a small bug on line 307 in version 1.0.

// insert the caption
_wrapper.siblings('.caption').text(_thumb.attr('title'));

should be:

// insert the caption
_wrapper.siblings('.caption').text(_thumb.attr('title')||'');

Otherwise captions carry from one to the next if no title is provided on the next image.

At 6:00 am on April 1st, 2008 , Melissa wrote:

Hi,

This is a great gallery, however, I have lots of thumbnails and I’m looking for a solution to better display the thumbnails. Using http://sorgalla.com/jcarousel/ would be ideal. Any tips/advice is much appreciated!

Thanks,
Melissa

At 10:03 pm on April 3rd, 2008 , Pavel wrote:

I really like the gallery, but as far as I get it (I’m just a beginner with jQuery) the gallery doesn’t load the images asynchronously which is not quite feasible, especially when it comes to images with large file sizes. That is the case with the gallery I am now developing. The big images flood the cache of the browser and it almost crashes. I personally use thumbnails and smaller versions of each image for the gallery. I am now wondering what happens if I use custom thumbnails? Does the gallery, though, try to create ones, thus wasting resources? Finally, I would really recommend working on the usability and feasibility in case the issues I pointed out are indeed right (I am not quite sure they are).

At 11:01 pm on April 3rd, 2008 , Gabriel wrote:

Great gallery!

i’m currently using that http://monc.se/galleria/demo/demo_02.htm on a project but with explorer 6, i dont see the captions and prev/next links, is there a workaround or a fix for that?

Does anybody has the same problem?

At 4:22 pm on April 7th, 2008 , Matt Crest wrote:

Quick question. Not sure what all changed from 0.9 to 1.0, but I can’t get the hover to work as the trigger that you explained above .
You said to look for:

Look for:
_thumb.click(function() {
_container.siblings(’.active’).removeClass(’active’);
_container.addClass(’active’);
});

But the closest thing I could find in jquery.galleria.js was on lines 176-179 and was:

// add the click functionality to the _thumb
_thumb.click(function() {
$.galleria.activate(_src);
});

Which isn’t the same. Replacing the “click” with “onmouseover” doesn’t work, and actually breaks the script from working properly.

Any help on how to make this work in v1.0 would be great appreciated.

At 7:33 pm on April 7th, 2008 , Matt Crest wrote:

(sorry - subscribing to comments via e-mail)

At 1:00 am on April 8th, 2008 , gelund wrote:

On occasion IE7 displays the page loading designator on it’s tab, and “#x items remaining” in the browser footer. You can reproduce this behavior by going to the demo and refreshing the page a couple of times.

At 3:02 pm on April 8th, 2008 , Matt wrote:

I am doing a complete rewrite of my portfolio and I am using this script.

My problem is one similar to gelund’s above. In IE7 the page refuses to acknowledge that all items are loaded - displaying the loading icon indefinitely in the tab.

As I have implemented a multiple gallery ajax script, this loading problem appears to affect the thumbnails, which never appear even tho the next/prev links work.

Additionally with the vanilla galleria script the thumbnails in IE7 would not display properly, they would all become random widths inside the thumbnail box. This I have fixed be changing the galleria thumbnail code. *This only happened after pressing F5, not on first load :S*

I know that I am using images that are too big but I wanted to see what happens if that occurs. Any comments or solutions would be greatly appreciated.

I am still working on it but the testing site : www.fullempty.co.uk/js

At 4:57 pm on April 8th, 2008 , Hans wrote:

Great plugin but I have one small problem.

I’m using same page links to jump to certain parts on a page. When such a link is clicked the main image disapears. The caption is still there but somehow the image is gone.

If there is anybody with a solution out there cause this is really giving me a headache

At 3:36 am on April 9th, 2008 , mich wrote:

Quick question.

I started using this gallery interface as a starting point for a more complicated gallery with databases, etc. So far, I love it.

My problem is this:
When I change albums, I use ajax to re-display the thumbnail list. Of course, they are not formatted, so I included this line in my updateAlbums function in javascript:
$(document).ready(function(){ $(’ul.gallery_demo’).galleria(); })
to get the galleria to resize them, etc.
BUT, now I get TWO images in my #image_viewer div. If I click on another album, I get 3, etc… I do not change the image_viewer div in the javascript at all.

I don’t know if it would be better to deactivate the main #image_viewer div so that I could load the main image manually. I tried looking at jQuery code but I couldn’t get it. Is there a way to do this? Or would you suggest something else, say putting the initalizing script somewhere else?

thanks!

At 9:56 am on April 9th, 2008 , Matt wrote:

To Mich:

I did something similar with ajax to load in new a of thumbnails. And had the same problem with formatting the gallery.

I solved it by using jQuery to hide, then delete the old gallery, then create a new gallery div, insert the code and format the gallery in that one. I don’t know how much jQuery you know but the code in on my gallery page (http://www.fullempty.co.uk/js/gallery.htm) but if that seems reasonable and if you are really stuck I can send you further comments/info. This seems to work well otherwise IE7 gives a horrible flicker as it processes the galleria thumbnails.

I keep running into problems in IE, any help with infinite loading would be appreciated!

At 8:37 pm on April 10th, 2008 , jeremy wrote:

I was curious on how to get the thumbnails to line up to the right of the image being displayed?

———
| | |_|
| | |_|
| | |_|
———

what i have here is what i want to implement. The big box= actual photo, small box= thumb

At 8:37 pm on April 10th, 2008 , jeremy wrote:

that didnt work to well.
lol sorry

At 3:45 am on April 11th, 2008 , Aaron wrote:

I am sorry if this is an easy answer (I’m definately new at this) but I was wondering how you could take the caption of each image, and move it elsewhere on the page, other than below the image and have it still change with the image? Thanks for the code and any ideas you may have!

At 7:13 am on April 11th, 2008 , jeremy wrote:

hey aaron, I have been trying to accomplish the same thing. If you look on the Demo2 page. and basically just take the css from that document and work it into yours. I have gotten the caption to be elsewhere, but i cannot get the thumbnails to line up on the right side of the image.

This may not be the correct way to do this, but i set the top and left sides of teh containers at their desired points. maybe this helps.

At 7:30 am on April 11th, 2008 , Matt Crest wrote:

@jeremy: To move the thumbnails to the right you just need to switch the element to float:right; and the big image container to float:left; At least that’s how you can do it really easily with the demo2 code + css.

At 7:33 am on April 11th, 2008 , Matt Crest wrote:

oops - didn’t use the code tag - sorry, switch

.galleria li { float:left; }

to

.galleria li { float:right; }

and

.galleria_container{float:right;}

to

.galleria_container{float:left;}

That works for me with the code from demo2.

At 8:24 am on April 11th, 2008 , ranmajen wrote:

Would you consider to add comment or rating function to the gallery?

At 8:28 am on April 11th, 2008 , Jhungso wrote:

Hello,

Is there any optional in example I want the larger image will display in a new modal, using jquery modal? any suggestion?

At 3:05 pm on April 11th, 2008 , Jack wrote:

Far above, I posted a link to my site where I altered the code to allow a caption container to be specified. This both allows the default behavior, and allows you to designate something else as the image caption container. In other words, it works just like the image container option.

At 9:19 pm on April 11th, 2008 , jeremy wrote:

@matt

Thanks for the info. Much appreciated. I got everything lined up after a while of messing around. This is really my first website using no tables. So im teaching myself css and all that comes along with this.

Thanks to the author of the script and to all who help with it.

At 9:21 pm on April 11th, 2008 , jeremy wrote:

one last question. Is there a way to get the images (in the container) to load to the center? Rather than the left side?

At 9:45 pm on April 11th, 2008 , Matt Crest wrote:

@jeremy - It sounds to me like you should try and find some good CSS tutorials (search “learn CSS” or “CSS intro” and you’ll find thousands of resources). You can find one off solutions to problems like you’re having, but unless you really understand what’s happenning - you won’t be learning much.

With that said…you’d need to remove the float:left; or float:right; from…

.galleria_container

And you may need to put a clear:both; in there. If you need more explanation on what those do, try Googling around

At 9:47 pm on April 11th, 2008 , Matt Crest wrote:

Anyone have a solution to my posed issue - how to get the hover to be the trigger instead of a click?

At 2:07 am on April 12th, 2008 , Paul Drewett wrote:

I love this script. It is AMAZING! Fantastic work!

May I add that the designs of the two demos are truly brilliant in their simplicity.

A massive congratulations.

Paul

At 4:22 pm on April 12th, 2008 , Gerasimos Tsiamalos wrote:

Hey all,

Excellent script. Just a quick notice for those using the script in conjuction with the jquery ui tabs script.

Initializing the tabs:
$(’#container-3 > ul’).tabs({ selected: 1 });
MAKE SURE you specify the selected attribute otherwise the galleria script won’t work at all (IE6) or misbehave (FF2).

Keep up the good work

At 7:11 pm on April 13th, 2008 , Dustin wrote:

GREAT work. Love it!

Is there any way to crossfade images? I have it fading in… but when I select the next image, the previous image just disappears and the new one fades in. I’d love to be able to fade the previous image out and simultaneous fade the new one in.

At 12:33 am on April 14th, 2008 , Justin wrote:

I’m really liking this script and the published demos. But have a question I’m hoping one of you can answer.

I have several landscape oriented images (w=700, h=438), the center of which are not very interesting. Because the thumbnails center on the image, they sometimes show up as solid colors, etc.

How can I force the thumbnail to not center, and instead begin at the absolute top-left?

I’ve tried adding an inline style to the image list item, but that did not seem to make any difference:

What am I doing wrong?

Thanks in advance for the help!

At 12:00 pm on April 14th, 2008 , David (author) wrote:

@Justin: something like:
img.thumb{margin-top:0!important;margin-left:0!important} in your CSS should do it (not sure how IE/win reacts though).

@Dustin: no crossfades yet, sorry!

@All: regarding positioning issues: it’s all in the CSS and not the galleria plugin itself. Have a look around for CSS tutorials/forums. Regarding script bugs/suggestions: please post them at the google code page ( http://galleria.googlecode.com ), so I know where I have them. Finally, the script is still in beta so there are plenty of requests and features that needs to be fixed/added. Don’t be afraid to try to fix them yourself, the source code is well documented. But don’t forget to tell everyone else how you did it. Thank you all!

At 10:22 pm on April 14th, 2008 , Justin wrote:

David-

Adding that line to the css worked perfectly! Thank you; thank you.

(worked in safari and IE7)

Justin

At 8:05 am on April 15th, 2008 , Ross Brewer wrote:

For Matt Crest’s question - how to get the hover to be the trigger instead of a click?
In jquery.galleria.js replace click with mouseover.
Lines 176-179
Change -

_thumb.click(function() { $.galleria.activate(_src);
to

_thumb.mouseover(function() { $.galleria.activate(_src);


At 3:08 pm on April 15th, 2008 , Matt Crest wrote:

Thank you Ross! Hate/love it when it’s something as simple as that Just get rid of the ‘on’ from ‘onmouseover’.

Thanks again. Very much appreciated.

At 9:48 pm on April 16th, 2008 , M4d3L wrote:

What can I do to show 2 gallery in the same page?

At 5:39 am on April 17th, 2008 , gelund wrote:

Jeremy, you can center your main image like this:

At 5:44 am on April 17th, 2008 , gelund wrote:

Jeremy, you can center your main image like this:

**

At 8:09 am on April 17th, 2008 , jeremy wrote:

Sorry if this has been asked. I briefly read through the posts.

But how do i go about adding another page of thumbs to view from, instead of all as one whole. Say i want two groups of 15 thumbnails and a toggle button to swap from one page of thumbs to the other.

http://www.jeremywisecup.com/misc/noant/_photo/noantphoto.html#photos/fotog_2.jpg
The above address is the link to the site im working on.

At 2:45 pm on April 17th, 2008 , Ken McGuire wrote:

Hey folks (and to all reading), has anyone had any joy, or could possibly direct me, in changing the thumbnails? Rather than display thumbnail images I’m looking to display the alt or title text, which I’ve set to a number e.g. ‘01′. So the output of thumbnails would be ‘01 02 03 04′ etc. instead of thumbed images?

Any suggestions or assistance greatly appreciated.

At 2:46 pm on April 17th, 2008 , James wrote:

Hi David,

Firstly, this is a great site. I have developed a site using a pure CSS gallery but its not adaptable enough. Yours will do perfectly.

A couple of questions, as I can’t seem to get my head round the code completely. I am trying to display Portrait and Landscape images. Which lines of code control main image size so the container doesn’t jump around, and how do I ensure the thumbnails do not expand to fill the available space. A simple code snippit of the relevant lines, and some direction on the changes will bring me along leaps and bounds.

Thank you so much.

James

At 10:30 pm on April 17th, 2008 , Shank wrote:

Is there a “easy way” to customize this to use as a video gallery?

I imagine how tired you are of people asking for “easy ways”, but i would really appreciate if you answer this.

I think that one way to do that, customizing as minimal as possible, is calling the thumb of the video, and when it would be open in ‘main_image’, one script set the css propriety of the image to display none, and to display instead one hidden div that contains the video itself.

Is that hard to do? could you help me with that?

At 2:05 am on April 18th, 2008 , jeremy wrote:

@shank.

why don’t you rephrase your last posting.

Remember. They DON’T have to help you in anyway. so acting like a kid that doesn’t get help from the first time asking, will not help anything.

At 2:46 pm on April 18th, 2008 , Shank wrote:

@jeremy

Sorry, but I dont understand what do you mean. What mistake did I make?

I know that they dont have to help anyone, anytime. But is it a big mistake ask for it?

Anyway, I am sorry to disturbe you and anyone else

At 3:50 pm on April 18th, 2008 , Ken McGuire wrote:

Got around my issue re: thumbnails as text rather than images… by using images. Made up images of the numbers and used them as custom thumbnail. Manual process but gets the desired effect.

Also added in the Easing plugin to mix up the transitions, using jQuery.animate instead of jQuery.fadeIn. Works nicely.

At 3:58 pm on April 18th, 2008 , ouanassi khalid wrote:

how can prevent the users from downloading the pictures?

At 7:24 pm on April 18th, 2008 , Kristin wrote:

Is there a way to implement a slideshow with the images, like a little bit of code added to the galleria.js file? I’m not the most proficient in JS, so I’m not sure how to go about making up the code myself and inserting it.

At 11:03 pm on April 19th, 2008 , Kristin wrote:

Also, I cannot get the custom thumbnails to work in Internet Explorer. They work beautifully in Firefox, but in IE, nothing shows up except for the borders of where the thumbs should be and when you click on them it links directly to the image. Any thoughts? Thanks.

example:
http://endocentric.org/2008/?page_id=6

At 4:22 am on April 20th, 2008 , Kristin wrote:

Heh, der, I’m super smart and didn’t close my link tag. Heh. Nice of firefox to overlook it though. :p I’d still like help with the slideshow question if anyone has any ideas?

At 1:08 pm on April 20th, 2008 , Acronyms wrote:

Would be great to be able to scroll images.

At 1:18 pm on April 20th, 2008 , Boyd wrote:

@Rob & @Dustin: I have managed a quick hack to crossfade between images… since I’ve only known about jQuery four about 24 hours I’m sure there is a much cleaner way of doing this but it achieves the effect…

Original code:

// define a new image
var _img = $(new Image()).attr(’src’,_src).addClass(’replaced’);

// empty the wrapper and insert the new image
_wrapper.empty().append(_img);

Modified code:

// Removes class ‘active’ which CSS defines to have z-index: 0
$(’.galleria_wrapper img’).removeClass(’active’);

// define a new image with class ‘active’ which CSS defines to have z-index: 1
var _img = $(new Image()).attr(’src’,_src).addClass(’active’);

// insert the new image - removed the call to empty()
_wrapper.append(_img);

This mods assumes the following CSS:

.galleria_wrapper img {
z-index: 0;
position: absolute;
top: 0;
right: 0;
}

.galleria_wrapper img.active {
z-index: 1;
position: absolute;
top: 0;
right: 0;
}

Hope that helps.
Boyd

At 10:14 pm on April 22nd, 2008 , gelund wrote:

James,
You can set the height of the gallery parent ul equal to or slightly greater than the thumbnail height, and overflow to hidden to prevent IE7 from jumping around during the li load.

At 4:32 am on April 24th, 2008 , taltos wrote:

Fantastic gallery!

I too am trying to get the thumbs on the left instead of below with DEMO1. I saw above that someone suggested:

.galleria li { float:right; } and .galleria_container{float:right;}

But I do not see where “.galleria_container” is located in DEMO1. Anyone want to help a struggling designer out?

Thanks a lot

At 8:02 am on April 24th, 2008 , gelund wrote:

Taltos…
Set the right float on main_image

At 4:23 am on April 29th, 2008 , Tay wrote:

Hi all. This gallery looks really really great. I’m trying to implement it into my website and I must admit I am a total newbie fighting my way through designing my first website. Everyone seems like they know what they’re doing making beginner explanation a waste of time for most. Anyway, I’m having trouble getting the gallery to work. I know if I can just get it working (ala the demo), I can alter the setting to make it look the way i want. Is there some special way I need to organize all the files so that they will recognize each other? I’m designing the site in dreamweaver. All my photos are resized the way i want etc. I know there are so many questions in this and most may be impossible to answer. I guess I’m just hoping someone can help me can this thing off the ground and give me a quickie version of the basics.

At 3:00 pm on April 29th, 2008 , taltos1 wrote:

Tay,
Since I do not have much info on your specific problem I would suggest that you place the galleria folder in a “site” you set up in DW. Then open the demo HTML files and edit them from there. It should work from the start and then make your edits step-by-step.

At 4:06 pm on April 29th, 2008 , Tay wrote:

OK, that’s fair. I will try that thanks. I guess what i’m looking for is for direction as to how I need to organize my folders so that they recognize each other. I will play around with it though. I’m confident I’ll figure it out.

At 6:09 pm on April 29th, 2008 , Rachel wrote:

Perry (or whoever else can answer)–I’d also like to add HTML to my caption. After I replace line 309 with your code that calls for “longdesc”, how do you actually use HTML in the longdesc tag? Can you give an example?

Incidentally, if anyone has gotten a Lightbox effect working, that might eliminate my need for HTML in the caption. What I’m looking to do is offer the user any way to enlarge the image.

At 5:10 am on April 30th, 2008 , Jeff wrote:

Great utility! I used it for displaying images of automobiles for an auto dealership client of mine. Combined very well with PHP to dynamically load whatever images the client chose to upload. See it in action here:

http://www.lehightonfordlm.com/

Click on the “Inventory List” link in the site map, then click on a camera icon for one of the vehicles in the inventory list.

Thanks for the tool!

At 12:46 pm on May 1st, 2008 , Ben wrote:

Hy.

First of all thanks for this wonderful gallery.
The issue I have is already mentioned some times above, but I didn’t found an answer (sorry if I may have overlooked it).

I was hoping if someone could point me in the right direction to getting the thumbnails in Carousel style ? I would appreciate it.

At 6:09 am on May 5th, 2008 , Michael F. wrote:

Hey all,

This gallery is really great. I’m pretty new to java/css and i had a few basic questions i was hoping someone could help me with that i haven’t been able to figure out thus far. FYI, I’m using Demo 1 as a template:

1) How can I center my thumbnails based on the main image? It looks like I’m left aligned but i can’t seem to figure out how to center it.

2) How and where do i put in the code for links to the left of my main image to go back to say my homepage using a .gif as a button?

3) I know this has been asked before but i didn’t understand it quite clearly… How can I resize my images so that the thumbnails don’t bounce around? Is that even possible or is that just the price of having different sized images? Do I just need to set my main image height and width to “auto”? I tried that and it didn’t seem to work for me.

Thanks to all who respond and my compliments once again to a fine gallery!

At 3:11 am on May 6th, 2008 , Steve Jiang wrote:

The tool is great, but I would like to make one suggestion:
Currently, you cannot have more than one independent galleria on a single webpage. Maybe you can, but I have yet to configure that out. After reading the source code a little bit, I found out that it might be because of the static CSS class its using. IE. both galleria are querying based on the “.galleria” class. This makes both galleria on the same page advance slides simultaneously, which may not be what we want.

We should extend this feature so that it does not query based on a fixed class, but relative to its parent or the initial configuration.

That’s just my thought!

Great work by the way!

At 10:19 am on May 6th, 2008 , Nic wrote:

@(Everyone who wants more than one gallery on a page - especially those who want them on tabs)

This is the web after all. Page loads are allowed.

Please bear in mind the way that Galleria works - it is loading the full size image for every image in the gallery. Loading multiple galleries (especially if they are on tabs) may not be a very wise idea. Consider page load times, etc.

Just my 2 cents - please think about the bigger picture (excuse the pun!)

At 4:38 pm on May 7th, 2008 , T wrote:

Man this gallery is so money. Congrats on its success. I have one small question that I know must be an easy fix but I haven’t seem to crack it yet (I’m fairly new to CSS). I want to have vertical nav buttons to the left of my main image (using the demo 1 as a template) that go back to the homepage, go to my contact page, go to other galleries, etc. I positioned the .gif link buttons where I wanted them but then when I change the browser window’s size (using the bottom right corner of the browser), everything moves except for the nav which messes everything up. I have been using the position: fixed line in the nav class, but when i change the position to anything else the formatting goes crazy and i can’t fix it. Does this make sense? Can someone please help me get on the right path? What do I need to do to have a separate vertical nav that be positioned to the left (or anywhere) of my main image/thumbnails. Thanks!

At 11:52 am on May 9th, 2008 , L wrote:

Hello

This is an excellent gallery, I am so frustrated because I cant get it to work.
The main image is located way below the container and covers the thumbnails.
I have copied and pasted the demo code and css styling. I have tried tweeking the css #main_image margins but everything else moves with it.

I would appreciate any suggestions.

At 8:54 am on May 12th, 2008 , Penis Extenders wrote:

How penis enlargement pills work, check penis enlargement techniques.

At 2:07 am on May 14th, 2008 , Aaron wrote:

@jeremy - Thanks for the help in a previous post! It worked great!

I have a new question, however. On my page, I want the image (when it is loaded into the container) to be centered not only horizontally in the container (which I have achieved) but also vertically, so that a wide image doesn’t just load at the top. Any suggestions? Thanks again!

At 2:12 am on May 14th, 2008 , David (author) wrote:

@Aaron (and everyone else): It is much better if you post any questions at the Galleria Forum. I’m around there so just ask away. I’m not saying I can answer them all, but someone else might know the solution if I’m not around!

At 10:42 am on June 4th, 2008 , Taha Paksu wrote:

Hey this plugin rocks! I added a checkbox to start/stop a slideshow and I thought that would be useful to others if I post it here. Maybe you could include it in your next release

Ok, it also needs the timer plugin written in jquery. It can be found here :
http://plugins.jquery.com/files/jquery.timer.js_0.txt

so I just added a checkbox which has the ID “slideshow-controller” and the code which triggers the slideshow. The time I used is 2secs but it can be easily changed.

the code is :


jQuery(function($) {
var val=0;
$('#slideshow-controller').click(function(){
$.galleria.next();
if(val==1) val=0;
else {val=1}
$.timer(2000,function(timer){
if(val){
$.galleria.next();
timer.reset(2000);
} else {
timer.stop();
}
});
});
});


At 12:45 pm on June 4th, 2008 , Matt Blalock wrote:

So I have had this gallery succesfully implemented for about a month of testing. Suddenly, the main image positions itself in a different place. It seems that when centering, it is centering based on the top left corner of the image, what could I have done? This only occurs in FF3 and SOMETIMES in IE7.

Any ideas?

At 9:27 pm on July 1st, 2008 , latin wrote:

How REMOVE the FADE of thumbnail:
I copied the code of Galleria 1 Demo , all works good. Now I would like to avoid the fade effect. What code I have to change. Thanks.

At 6:08 pm on July 30th, 2008 , Daniel wrote:

Hi,

Great gallery but can anyone tell me how I can use more than one of these on a page without it breaking?

I have tried but clicking on the thumbnail changes the main image in them all.

Thanks

At 3:01 am on August 3rd, 2008 , colin wrote:

Galleria is a very good program - light, functional, customisable.

One thing that I’d do differently is the insert handling. I wanted to have the thumbnails above the image, but found the only way to do it is to change line 86 to insertAfter(this) instead of insertBefore(this).

It occurs to me that it would be more useful to replace an element (which one could then place ad lib) than to insert before or after an element.

Only minor complaint with an outstanding program, and hey it’s easy to fix anyway. Thanks!

At 2:01 pm on August 20th, 2008 , Jose wrote:

Just stumbled upon your plug in and it’s seems that this is what I need for my own gallery. I don’t need to upload loads of photos just around 10 -20 and I thought this is the best solution.

Anyway, I will try to install it and will post feedbacks later. Congratulations again!

At 1:38 pm on August 26th, 2008 , KONDO wrote:

I want to make a website like this…
http://create.applicuts.com/cgi-bin/applicuts/applicuts.pl

thumbnail from group 1.. will change the FOREGROUND image
foreground image is transparent gif..

thumbnail from group 2.. will change the background table.

is it possible with this galleria script ? … on the same page change background image and image itself ?

Thanks.

At 3:56 am on September 9th, 2008 , Joe wrote:

I’m not sure if its just my setup (site software and images, etc.) but the transition to each image when clicking on a thumbnail is abrupt..

Its not as smooth as I would like.. Can this be changed?

This site has an example with jquery thats appears to be smoother on transition..

At 3:57 am on September 9th, 2008 , Joe wrote:

oops forgot to include link..
http://jonraasch.com/blog/a-simple-jquery-slideshow

Would appreciate any hints..

Thanks

Joe O

At 8:24 pm on September 21st, 2008 , Drew wrote:

I am using an ajax request to load a gallery into a div. Since the gallery isnt on the page at the beginning, I can’t call the galleria() function in the jQuery(document).ready section of the site.

I do have one javascript function that fires when gallery div has completed loading, but it doesnt seem to work. I’ve tried two methods with now luck -

// first

function setGalleria(request){
var galleryDiv = document.getElementById(’gallery_div’);
var galleryUl = galleryDiv.getElementsByTagName(’ul’);
J(galleryUl).galleria();
alert(’ajax complete called!’);

}

// second
function setGalleria(request){
$(’ul.gallery’).galleria();
}

Neither of these methods seem to work. Any suggestions?

Thanks

At 4:03 am on October 1st, 2008 , Randy wrote:

I just have two questions.

1.) How in the heck do I have the thumbnails able to scroll? I have 30 images and love the way this gallery looks, but whenever I add more then 6 images, they just tile down and don’t scroll to the right to click on more images.

2.) Any way to make the whole galley size larger? without messing anything up?

At 12:00 am on October 12th, 2008 , Grigory wrote:

Hi,

I found a bug: when I’m trying to use below construction I receive “Error loading image” error:

I think it because of using http:// for image loading.
Can you solve this problem please? I’m trying to combine my photos from PicasaWeb with Galleria at my website.

At 12:02 am on October 12th, 2008 , Grigory wrote:

Hm… The code I wrote has disappeared. This code:
<li><img src=”http://example.com/img/1.jpg></li>
<li><img src=”http://example.com/img/2.jpg></li>
<li><img src=”http://example.com/img/3.jpg></li>

At 1:21 am on October 12th, 2008 , Grigory wrote:

Bad code:
<li><img src=”http://lh3.ggpht.com/grigoryname/SPDg4HDyhWI/AAAAAAAAACY/H6I5Pmf591k/italy_11.jpg”></li>

Good code:
<li><img src=”http://lh3.ggpht.com/grigoryname/SPDg4HDyhWI/AAAAAAAAACY/H6I5Pmf591k/s144-c/italy_11.jpg”></li>

Why?

At 5:15 pm on October 12th, 2008 , Grigory wrote:

The problem is solved.

At 6:04 pm on October 13th, 2008 , Julie wrote:

Yours is the simplest code approach I’ve found so far for what I’m trying to do with a photography web site, but it’s still more complicated than what I need. I used PhotoShop to create a variety of pixel-specific sizes of BOTH thumbnails & larger images, and CSS to design a scroll bar for the thumbnails (may be answer to Randy’s question above???).

I’m not looking for fancy effects — I simply want the larger images to show in a specified div tag with an onclick of the thumbnail located in another div tag, but the JavaScript I hired somebody to write only works with Firefox, not other browsers.

here’s the JavaScript

function enlargeImage(imageName){
if (imageName == “imageName1″){
document.enlarge.src = “../images/image1.jpg”;
}
else
if (imageName == “imageName2″){
document.enlarge.src = “../images/image2.jpg”;
}
else
if (imageName == “imageName3″){
document.enlarge.src = “../images/image3.jpg”;
}
}

and here’s the list of thumbnails in the body

with the ‘t_image’ referring to the thumbnail size of the image & the ‘image’ referring to the larger image

Can anyone help with a different approach, a code fix or a hack that would work with all browsers? Thanks!

At 12:49 pm on October 14th, 2008 , Charlie wrote:

Thank you Taha Paksu.

Updating your code so the slideshow starts on load:

Your plugin:
http://plugins.jquery.com/files/jquery.timer.js_0.txt

and the modified script below:

$(document).ready(function(){
var val=0;
$.galleria.next();
if(val==1) val=0;
else {val=1}

$.timer(2000, function (timer) {
if(val){
$.galleria.next();
timer.reset(2000);
} else {
timer.stop();
}
});
});

Can someone please show me how to stop this slideshow when a thumbnail is clicked on. Any help?

Thanks

Charlie

At 1:02 pm on October 16th, 2008 , Book wrote:

I’ve found so far for what I’m trying to do with a photography web site, but it’s still more complicated than what I need. I used PhotoShop to create a variety of pixel-specific sizes of BOTH thumbnails & larger images, and CSS to design a scroll bar for the thumbnails. JavaScript I hired somebody to write only works with Firefox, not other browsers.

At 8:44 am on October 19th, 2008 , nicole wrote:

I’m trying to implement galleria but being the java-unsavvy person I am, I can’t figure out why my photos are showing up ABOVE my thumbnails after I click them, instead of beside.

Where should I look to fix this problem? To get familiar with the coding, I’m basically using the same code as the demo.

At 1:33 pm on October 23rd, 2008 , laky wrote:

thank you David for resolve the “first item show” problem

At 12:16 pm on October 28th, 2008 , Peter wrote:

Thank you Thank you, such an excellent image gallery.
Sorry to be a pain, but im totally new to all of this. But I want to add a link each caption to a PDF, different caption different PDF, could anyone please help me.

thank you Peter

At 8:17 pm on November 16th, 2008 , Rommi wrote:

Really nice javascript gallery, thanks David!

My question will be: how can i display thumbnails in one line if i have like 50+ of them?

Thanks

At 1:40 pm on November 20th, 2008 , Roy Halevy wrote:

I have a problem with this gallery
once you put like 15 images the thing works really slow (especially on IE6) because it downloads all the images and then starts to show them
anything I can do to control the preload to work better?

At 5:50 am on November 24th, 2008 , Andrew wrote:

I’m using the galleria on a website that I’m developing, but some of the galleries that I load only have one image. If the gallery has one image, then clicking active image to see the next acts weird. Basically, the active image turns blank. Is this a bug or do I need to check the number of images before initializing the galleria object?

At 10:28 am on December 16th, 2008 , estetik wrote:

Hey bro, great product, just now getting into it, but a problem has arisen, I’m in crunchtime right now (as a lone developer) and we need shit to get done and I need help tearing apart your code to make it do what I want.

At 7:31 am on February 1st, 2009 , terrance wrote:

Hi,

Just a quick question, I’m wondering how can I disable the thumbnail cycle. When click on previous at the 1st image, it will not go to the last image.

And when it reach the last image, it will just stop there and will not return to the 1st image.

At 8:40 pm on February 1st, 2009 , Tobias wrote:

Hello,

I was just wondering is it possible to use this gallery script with PHP? I´m pretty new to javascript so I dont know alot about it.

I tried to use them togehter but i didn´t work. It doesn´t show any of my images. I think I know whats wrong but I cant do anything to fix it.

I tried to use a for each loop on my pictures so I wouldn’t have to write a new gallery code for every one of my gallerys but as you maybe already know it didn´t work.

The only result I got was that this was shown at the bottom of the page - “; ?>

So i figured that maybe this ” is the one destroying the code, but could anyone help me and tell me what I need to do to fix it? If thats possible?

Best Regards
Tobias Johansson

At 12:40 pm on February 5th, 2009 , Denizli Rehberi wrote:

thanks for a lot

At 7:49 pm on February 7th, 2009 , Chuck wrote:

Any solution to the single image problem? When there is only one image in the gallery, and a person clicks the main image, the main image blanks out.

At 2:40 pm on February 9th, 2009 , tuba buyukustun wrote:

thnks you.I tried to use a for each loop on my pictures so I wouldn’t have to write a new gallery code for every one of my gallerys but as you maybe already know it didn´t work.

At 3:33 am on February 10th, 2009 , sohbet wrote:

Hey bro, great product, just now getting into it, but a problem has arisen, I’m in crunchtime right now (as a lone developer) and we need shit to get done and I need help tearing apart your code to make it do what I want.

At 8:20 am on February 16th, 2009 , tommey wrote:

Just curious is there away to have the thumbnails placed into a carousel. Having the thumbnails stack into multiple rows is okay but want to minimize th expanding space if I add alot of thumbnails. Any help would be wonderful.

Thank you!

At 10:31 pm on February 26th, 2009 , Ed wrote:

Don’t know if this is duplicated: forgot to check the “notify me of followup comments” section. The galleria looks fantastic. I’m just finding out about it now even though I guess it’s been there for a while. I had a few questions with the demo2 one. The applicable page is at http://thescyc.org/stage/img_activities.html

1. The main container for some reason is going too far to the right. I can’t seem to find the part of the code to push it back left next to the thumbnails.

2. Is there a way to make the thumbnails section inside a div so that if there’s a lot more, it can have a scrollbar of some sort?

3. Can I make the main image clickable to open a bigger version of the image in another window?

Thanks!

At 5:06 am on February 27th, 2009 , Methallico wrote:

Can someone please help me out. I’m trying to make the thumbs to open a page upon clicking on it. I’ve looked at the forum for Galleria and here, but can’t seem to find the code. I’ve been messing around with the code now for about three days, but I’m still lost. Any help is much appreciated! Thanks!

At 2:20 am on March 4th, 2009 , Ed wrote:

fixed #1. Anyone have thoughts on #2, #3?

At 3:39 am on March 4th, 2009 , LindsayannG wrote:

Hey there. I emailed you through your blog, but i didn’t get a response. I am HOPING that maybe you can help me a little.

I did everything suggested, and I have never had an issue implimenting java, but this time its KILLING ME.

I added the code and uploaded the java code to my root folder, made sure the file paths related to that java file were correct, but for some odd reason, the java is NOT working. I can tell that the site is reading the CSS and all, but the java is clearly not being read.

Can you please help me??? I offered PAID support.
Here is where I have uploaded the galleria.
http://bscphoto.com/galleria/demo_01.htm

At 2:04 pm on March 4th, 2009 , Dave wrote:

I am having the same problem as the poster above, please help!

At 2:10 am on March 11th, 2009 , KB wrote:

I’m having the same problem as the last two people.

At 10:21 pm on March 11th, 2009 , Vandal wrote:

Seems that I am too stupid to read & understand your instructions - if I upload all the required files to my root, add the script to the head of my page and then add an unsorted list of images with the right class, I still just get the images in that unsorted list, full size.

What am I doing wrong?

At 8:34 am on March 13th, 2009 , Jesse Pinho wrote:

Got this up and running =) I combined it with jQuery.scrollTo (http://plugins.jquery.com/project/ScrollTo) to create a nifty little scrolling gallery. Check it out: http://www.amnestychicago.org/media.html?album=atenco

@LindsayannG: I visited your page, and noticed that when you included the javascripts via , both of the .js files are just the Galleria script (even though one of them is called jquery.pack.js). You don’t even have a link to the main jQuery library. Also (and this may help the two posters after you as well): make sure when you fix this that you use jQuery version 1.2.6 or earlier–NOT 1.3.x! Galleria doesn’t work with 1.3.x.

Jesse

At 8:46 am on March 14th, 2009 , dtv antenna wrote:

That is one awesome looking demo. I love its simple, sleek, and classic yet contemporary design.

At 2:40 am on March 15th, 2009 , theCreator46 wrote:

I downloaded this awesome photo gallery and it works great. I was easily able to make it fit most of my needs. I do have one question though.

Is there a way to only put 4 thumbnails in a row and then make an arrow button to show the next set of 4 thumbnails?

This would be kind of like the following link: http://sorgalla.com/projects/jcarousel/

At 1:41 pm on March 27th, 2009 , Ferforje wrote:

thanks for sharing

At 3:04 pm on March 31st, 2009 , Nick wrote:

A friend gave me a quick hack to turn this into a slideshow which stops when you click on it. He wasn’t proud of how hacky it was - so apologies to the purists out there, though it doesn’t require any additional jquery timer stuff. This all goes into your main page html, not any of the .js files.

Above everything, just below put this:

var INTERVAL = 6000;
var slideshow_timer = null;
var is_sliding = null;
function slideShow()
{
is_sliding = true;
$.galleria.next();
is_sliding = false;
}

changing interval to whatever you want. seconds*1000. Then find image.attr(’title’,'Next image >>’); in your html file, and put this below that:

if (is_sliding== null)
{
slideshow_timer = window.setInterval(slideShow, INTERVAL);
is_sliding = false;
} else if (!is_sliding)
{
window.clearInterval(slideshow_timer);
slideshow_timer = null;
}

View source on http://www.synergyphotography.com.au/gallery/ to see mine if yours isn’t working.

At 3:06 pm on March 31st, 2009 , Nick wrote:

Sorry, that first bit should be just below the script type=”text/javascript” in your page.

At 10:57 am on April 3rd, 2009 , firmalar wrote:

thanks you very good

At 11:00 am on April 3rd, 2009 , kafkas wrote:

thanks you very good

At 6:08 pm on April 3rd, 2009 , Estetik wrote:

That is one awesome looking demo. I love its simple, sleek, and classic yet contemporary design.

At 5:43 pm on April 6th, 2009 , dış cephe wrote:

Thanks a lot.

At 6:34 pm on April 6th, 2009 , burun estetigi wrote:

thanks for sharing

At 6:36 pm on April 6th, 2009 , estetik wrote:

thanks you very good

At 6:37 pm on April 6th, 2009 , sac ekimi wrote:

That is one awesome looking demo. I love its simple, sleek, and classic yet contemporary design.

At 1:09 pm on April 10th, 2009 , arac kiralama wrote:

Galleria does one thing very good: it preloads the large images one by one, and as soon as the image is fully loaded, a thumbnail is presented and the image is immediately accessible to us. So every time you want to see the image - it’s already there. This makes the browsing experience incredibly fast and snappy.

At 1:09 pm on April 10th, 2009 , rent a car wrote:

The real beauty of Galleria lies in it’s simple HTML code. Simple create an unordered list, add a couple of images and Galleria will automatically create clickable thumbnails. Here is some examples on how Galleria will interpret your HTML

At 1:10 pm on April 10th, 2009 , Smartlipo lazerlipoliz wrote:

The result is a small, efficient and fast navigating website about unique travelling. I have use Galleria, a Javascript Image Gallery from David’s kitchen. The only downside about this script is the

At 8:44 am on April 13th, 2009 , yipt wrote:

If you still need any plugins, check these sites: http://rapid4me.com (rapidshare search) and http://file.sh (using a torrent). Hope you’ll find necessary soft there!

At 5:24 am on April 15th, 2009 , Chris wrote:

Hello, not sure if anyone is keeping up with Galleria at all, but this doesn’t seem to work out of the box with jQuery 1.3. There are other active reports regarding this issue on the google groups page. If anyone is listening, might want to check that out!

Here’s what Firebug was giving:
[Exception… “‘Syntax error, unrecognized expression: [@rel=”"]’ when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0×8057001e (NS_ERROR_XPC_JS_THREW_STRING)” location: “” data: no]
Line 0

At 6:01 am on April 15th, 2009 , Greg wrote:

Anyone got a simple way of getting reflection.js jQuery plugin to apply a reflection to the thumbnails? I’ve tried $(’.thumb’).reflect(); but due to the fact that the height is forced and/or inherited, reflection wont work

At 5:14 pm on April 20th, 2009 , d.l. wrote:

Great Plug-in,
Not sure if this question has been covered, but I want to have the ‘Main Image’ link to another page in my site once clicked. How can I modify the ‘next’ image click on the ‘Main Image’?

Thanks in advance.

At 10:01 pm on April 21st, 2009 , d.l. wrote:

Duh!

Scratch that previous post. I figured it out.

Thanks again, Galleria is great

At 12:26 pm on April 22nd, 2009 , finch wrote:

Similar to the above post, could anybody suggest how to change the thumbnail onclick to act as a link to another page, rather than load the main image? Thanks.

At 11:28 pm on April 25th, 2009 , ASCC wrote:

d.l.

How did you do it? do you have a example?
Thanks,Adrian

At 9:18 pm on April 28th, 2009 , Emery wrote:

David, Thanks for the great plugin. Im trying to modify it to where when you click on the display image instead of going to the next image, it would instead popup to a larger image. Is this possible? Thanks in advance.

At 11:20 pm on April 29th, 2009 , Dan wrote:

David, et. al.,

I am looking to scale many, widely-different sized images. Not just the thumbnails but the big image too. Other people have asked that question and I didn’t see a solid answer for that. Is this possible?

If not, time for me to brush up on css and js and figure out how to modify this to handle that. I’ll assume this is the answer but w/ hopes someone will respond.

Dan

At 2:57 am on May 4th, 2009 , toner wrote:

ı have followed your writing for a long time.really you have given very successful information.

At 9:30 pm on May 7th, 2009 , Debbie wrote:

Can anyone tell me how to remove the history object from the file? I want my back button on my browser to function normally, taking me back to my last URL. Changing the history to false doesn’t seem to work.

At 9:30 am on May 10th, 2009 , mark wrote:

I’ve been trying to make this code work for me, but it isn’t ideal for me to have alot of rows of thumbnails when there are lots of images. i’d rather see the thumbnails scroll, but i’d settle for being able to figure out how to put them on the left side of the main image, rather than below it. can someone indicate to me which lines of code will do this? is it in the html file or one of the js files?

At 2:36 pm on May 10th, 2009 , interrentacar wrote:

Still having the same problem..any other advises?

At 5:05 pm on May 10th, 2009 , estetik wrote:

very nice page about image gallery.

At 1:12 am on May 12th, 2009 , oyun oyna wrote:

I’m really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
Oyun

At 1:27 pm on May 14th, 2009 , porno tube wrote:

im really usefull to follow long time

At 6:06 pm on May 15th, 2009 , Brendan wrote:

Would it be possible to have the gallery automatically “play”? Or what would I need to do to implement this…

At 2:38 am on May 16th, 2009 , Wollongong Photography wrote:

Brendan: The two comments by me (Nick) on March 31st, 2009 explain how to make it a slideshow. Scroll up a bit.

At 11:42 am on May 16th, 2009 , güvercin wrote:

thanx for post

At 11:49 am on May 16th, 2009 , rent a car turkey wrote:

very nice page about image gallery.

At 11:02 pm on May 16th, 2009 , Carol wrote:

Beautiful gallery! I’m very new to this, but did manage to get it working and it looks great. The only thing I would like is to have the thumbnails scroll instead of tiling. I have over 30 images a carousel type of scroll would be great. If anyone can help me with combining plugins I’d love to hear it?

At 8:58 pm on May 18th, 2009 , assos wrote:

thanks for contribution. very nice and useful article..

At 9:34 pm on May 18th, 2009 , Brendan wrote:

Wollongong: Thanks for pointing me in the direction. Works perfectly

At 1:19 pm on May 20th, 2009 , Leon wrote:

Hi David,

Have been using your galleria plugin and really liking it.

I am having what seems to be now an age-old problem of vertical aligning my landscape images. Having failed in all attempts using just css.

I was wondering if there was a way I could get galleria to insert a class to the main_img from the thumbnails? So I could define each thumbnail as class”portrait” or class=”landscape” and then add margin-top to the main_img on all .landscape

At 3:24 pm on May 23rd, 2009 , slike wrote:

Nice gallery…Thanks… With love from Russia !!!!!!!

At 6:23 pm on May 28th, 2009 , howdy wrote:

Hi,

Great gallery. Went through the whole thread and didn’t find a solution to this problem. How do you link each large image to a different URL? Right now it only goes to the next image. How do you associate a URL with each image?

At 7:06 pm on June 1st, 2009 , craig wrote:

Hi there, I have just created a galleria slideshow. I was wondering if there is a way to move the position of the thumbs so that they appear at the side of the main image.
Thanks
Craig

At 8:01 pm on June 5th, 2009 , Hennay wrote:

Anyone integrated it to read an XML file to get the images and thumbs?

At 11:16 pm on June 13th, 2009 , Ben wrote:

Empty captions: When one of the images in my list has an empty title attribute (and empty alt), when activated, I would like no caption to be displayed - instead, the caption of whichever image was previously active is displayed. I started with demo 2 and adjusted the CSS to make the image area 800×800 and moved the main image below the navigation/thumbnails. Any idea how I can get my blank/empty captions to remain that way?

Otherwise works great, it’s a really smooth piece of code. Thanks!

At 12:02 am on June 14th, 2009 , Ben wrote:

Position caption: How can I position the caption above the main image? Thanks.

At 7:42 pm on June 14th, 2009 , Steven wrote:

I followed the installation instructions above and triple checked the steps, but nothing works. My gallery isn’t a gallery; it’s a collection of thumbnail-sized boxes that can’t be clicked. And I say thumbnail-sized boxes because they are just 80px x 80px sized boxes of my images. They don’t appear to be reformatted by any of the code. This is my very first image gallery and I’m new to jQuery. Maybe I’m just making a stupid mistake? The files are in the right directories, my identifiers are correct.. I can’t figure it out. Does anyone have any advice?

At 9:42 pm on June 14th, 2009 , söve wrote:

thanks

At 6:08 pm on June 15th, 2009 , Craig wrote:

Hi, I’m in desperate need of help. I have blended galleria with j carousal on my site, However random thumbnail’s do not display correctly, they fall down. The site previewed fine locally, and then as soon as I uploaded it screws up. Also when the broswer is refreshed different thumbs fall off and others fix themselves which makes me wonder whats going. I’m already too days over due with this and the clients getting itchy. The whole point of using this over flash was for ease, speed and versatility, which ain’t happening.
please check the site out at www.kittykatdesign.com.au
thanks,

20 Trackbacks & Pings:

Trackback at 2:21 pm on February 14th, 2008 by Lightweight Image Gallery with Thumbnails | David’s kitchen:

[…] Trackback at 5:14 am on February 14th, 2008 by Galleria - a Javascript Image Gallery | David’s kitchen: […]

Trackback at 7:15 pm on February 15th, 2008 by roScripts - Webmaster resources and websites:

Galleria - a Javascript Image Gallery…

Electric fantastic stuff about design web 3 0 and other deliciousness…

Trackback at 5:12 pm on March 5th, 2008 by Ess - Sibran Lens » Blog Archive » Charterdream:

[…] The result is a small, efficient and fast navigating website about unique travelling. I have use Galleria, a Javascript Image Gallery from David’s kitchen. The only downside about this script is the […]

Trackback at 9:26 pm on March 11th, 2008 by Yeniçag Blog Gazeteler,Güncel haberler, yazarlar,siyaset, son dakika, haber » Blog Archive » javascript resim galerisi:

[…] sayfas?nda alternatif bir javascript resim&foto?raf galerisi çal??mas? yap?lm??. inceleme sayfas?nda ingilizce olarak detayl? aç?klama […]

Trackback at 11:27 pm on March 11th, 2008 by javascript resim galerisi:

[…] sayfasında alternatif bir javascript resim&fotoÄŸraf galerisi çalışması yapılmış. inceleme sayfasında ingilizce olarak detaylı açıklama […]

Trackback at 12:37 am on March 12th, 2008 by javascript resim galerisi : test deneme:

[…] sayfasında alternatif bir javascript resim&fotoÄŸraf galerisi çalışması yapılmış. inceleme sayfasında ingilizce olarak detaylı açıklama […]

Trackback at 6:49 pm on March 13th, 2008 by Links for 2008-03-11 [del.icio.us] : BiliÅŸim & Teknoloji Haberleri | BilisimTekno.NET:

[…] Galleria - a Javascript Image Gallery | David’s kitchen monc.se sayfasında alternatif bir javascript resim&fotoÄŸraf galerisi çalışması yapılmış. inceleme sayfasında ingilizce olarak detaylı açıklama var. […]

Trackback at 11:03 am on April 9th, 2008 by Liony&Yuffee » Blog Archive » test:

[…] Blog post: for comments and more information about the Galleria project, visit the blog post in the kitchen. […]

Trackback at 9:48 pm on June 22nd, 2008 by photo gallery javascript:

[…] […]

Trackback at 11:45 am on June 30th, 2008 by Penis Enlargement Black Book. | 7Wins.eu:

[…] […]

Trackback at 3:02 am on May 1st, 2009 by Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?:

[…] Galleria - a Javascript Image Gallery | David’s kitchen Excellent javascript image gallery - Jquery […]

Trackback at 6:21 pm on June 14th, 2009 by Fabián Link » Gallerias jQuery:

[…] Demostraciones: Demo 01 – Demo 02 Descargar: galleria-1.0b.zip – galleria-0.9.zip Vía: DAVID’S KITCHEN […]

Trackback at 1:08 am on September 25th, 2009 by Twitted by delicious50:

[…] This post was Twitted by delicious50 […]

Trackback at 11:40 am on November 4th, 2009 by JQuery: Una de plugins para galerías de imágenes | Jugando entre diseñadores:

[…] Spacegallery (Demo – Descarga) 2. GalleryView (Demo – Descarga) 3. Galleria (Demo – Descarga) 4. Supersized (Demo – Descarga) 5. PrettyPhoto (Demo – […]

Trackback at 6:03 pm on March 23rd, 2010 by Galleria for your Portfolio « Eleanor's News:

[…] you’re looking for a slick way to showcase your portfolio, try Galleria by Developer David’s Kitchen. I just used it for my illustration and art print […]

Trackback at 5:34 am on March 30th, 2010 by Using NextGEN gallery to bring an image gallery to your WordPress blog | eric lightbody:

[…] on how to do this, I’m going to walk you through getting NextGen gallery and the awesome Galleria jQuery image gallery to get […]

Trackback at 9:33 pm on May 16th, 2010 by JQuery Galleria - Vidahost Forums - UK Hosting and Domains:

[…] plugin that produces a nice Gallery with lots of options. Demo/Download/Developers page - Galleria - a Javascript Image*Gallery*|*David’s kitchen A little confusing to start with as some option, like container height are adjusted using options […]

Trackback at 1:59 pm on May 21st, 2010 by javascript resim galerisi - PcAnalist – Sınırsız Bilgi Paylaşımı:

[…] sayfasında alternatif bir javascript resim&fotoÄŸraf galerisi çalışması yapılmış. inceleme sayfasında ingilizce olarak detaylı açıklama var. jquery kullanılarak yapılmış galeriyi indirebilir, […]

Trackback at 2:57 pm on May 24th, 2010 by Galleria Flashing on Load - DesignersTalk:

[…] This is such a bad plugin. I’m having to start again, and the documentation for this is absolutely appalling. Galleria - a Javascript Image Gallery | David’s kitchen […]

Trackback at 6:18 pm on June 15th, 2010 by Galleria – Excelente galeria de imágenes escrita con jQuery | Pixelco Blog:

[…] Demostraciones: Demo 01 – Demo 02 Descargar: galleria-1.0b.zip – galleria-0.9.zip Vía: DAVID’S KITCHEN […]