appleton.me

Thanks for putting up the gallery. I have been looking for an example for a while.

@Patrick Version 2.0 requires less markup – one ul with one set of images will generate the main gallery image *and* the filmstrip.

This is easier for me than two sets of divs because I’m filling the gallery with dynamically from Wordpress. One loop is better than two (and I guess it would improve page loads slightly with less php to process…).

On the downside, version 2.0 seems to loose the sliding filmstrip border which moves with the little pointer.

@Roger I’m not too sure without having a look at it, but to be honest I didn’t write the plugin so I am not very familiar with its workings.
Do you have a demo page somewhere?

@Jesse I have had a play with it this morning and it looks like an either/or option. The js applies the same class (.nav-next and .nav-prev) to the panel arrows and the filmstrip arrows depending on the required layout meaning that you cannot have both at once.

I guess if you wanted to have both then the place to start hacking would be the logic which deals with adding in the navigation.

Hi!
I found you example page yesterday and I thank you for putting it up!
However I want to use the “Panels Only – Lightbox Style Gallery” but I dont get your example to work with that code. I´m using the code from Jack Andersons page without success… Any ideas?

Hi Andrew,

thanks a lot for putting up the demo page. I was using the new version, but I still used the code from the old demo examples and as you can imagine, it didn’t work very well.

I really doubted my coding abilities, after all it’s just a pretty simple image gallery right? After I finally looked into the javascipt code, I realized that something was wrong.

Thanks a lot for your example application, it really helped me a lot. With the right code to start with, using the gallery is actually pretty easy!

Hi Andrew,
Thank you for your help!
Is it possible to get Thickbox or Clearbox to work with GalleryView?
My idea is to use in the “Panels Only – Lightbox Style Gallery”.

@ Erik Bertilsson
I would think that version 1.x would suit you better – not sure that 2.0 can do different content in the filmstrip and panels.

@BN Wiersma

I’m afraid I can’t really offer any help on the PHP/SQL side without knowing a lot more about your specific application, but as for the overlay_height option, I think it was depreciated in version 2.0.

I have put together a list of options applicable to version 2.0.

How do you make this slider auto scroll with a timer between image switching? Anyone know? It would be a huge help!

Thank you for posting this on here by the way!

Thanks for the help andrew, it really saved my time.

Hey Andrew thank you very much for your example. Also I gotta say this site looks really nice!

I got a question though- I am a complete newb when it comes to jquery plugins. I have gone through around 3 jquery slider tutorials and the slider never even shows up on my website, nothing happens.

Could you run me through how I should go about installing this slider on Wordpress?

Sorry, I just cant figure this out. I have uploaded the .js files, the css and put the correct paths in. I have basically just copied your example. Are you able to check my page?

vander.co.nz/lotusfloralart.co.nz/gallery.php

Thanks if you do

Why is it that as soon as I put other html before and after the Gallery UL it turns to crap? Even just my nav sitting above it completely messes it up. It seems it is only capable of working when it is entirely on it’s own.

@Calvin
You can follow the examples on spaceforaname to get the gallery set up, but use the unordered list markup shown here in place of the div tags in version 1.x

@Matt
No idea I’m afraid.

@Brad
Looking at the link you provided, it looks like you have gone for another gallery. If you still want a hand with Gallery View, stick up another example and I’ll take a look.

@Jason
It depends on how many images you have in your gallery. If it is too many to fit in the filmstrip then you get the alternate scroll type.

@Jason
Not too sure, you could try playing with z-index maybe?

Thanks for pointing me in the right direction but I still can’t get it to work. I think the problem may be that even when I try to call the javascripts, they don’t show up when I view the source code on my website. I guess this means that I’m not calling them correctly. Honestly, no matter how many configurations I have tried, the blog itself never changes at all.

I’m not sure if you are using wordpress for this site, but do you know where these pieces of code would go in wordpress, if I wanted to have the slider appear in my sidebar? I mean which .php document to put them in, and where to put them. Hope this isn’t too much to ask.

You are a gentleman and a scholar. Can’t thank you enough. It’s good of you to take on ths project. I wonder what’s ever happened to the plugin’s author Jack?

I notice you recommend using the UL syntax in your example, and ignoring the DIV syntax given in the GalleryView CSS file. But, there are a lot of things that could be defined in the older syntax.

Could you tell us how the new v2 syntax should be written to define all the stuff your very helpful example leaves out?

For one, thing, I’d like to be able to use separate thumbnails. I’d also like to write captions for thumbnails, move the text panel down off the image, all kinds of stuff. Any advice would be appreciated.

I have it working with Firefox 3.0 but it is just displaying the pictures one on top of the other in IE7. Any thoughts on why this is happening?

I’ve managed to get v2 working on a site using your html example as a guide – many thanks. However, the loader gif doesn’t show until just before all the images have loaded. On larger galleries the site user is left looking at a blank screen for several seconds while the images load. I’ve also wrapped the gallery in a div with visibility:hidden (as per the instructions in gallerview.css “to prevent a flash of unstyled content”) and set a fixed height. In FF and Safari on the Mac the page maintains its dimensions but in IE6 and 7 I see the scroll bar extend to accommodate the loading images and then snap back once loaded (in IE6 the page extends as well). Any help to tidy up these frustrating little glitches would be much appreciated.

Hi Andrew, many thanks for the reply. You can see an example at http://www.scottishwomensconvention.org.uk/gallery2.asp. One solution would be to pop the whole thing in yet another div with the loader gif set as the background but it’s a bit of a fudge having it always sitting behind the content.

Just wanted to give a tip I found out (after banging my head against the wall for a few hours).

If you copy the code exactly, this code won’t work with ‘jquery-1.3.2-vsdoc2.js’ as your base jquery file in firefox (but will work in IE for whatever reason-how delightfully deceptive).

The genius that I am I copied everything but the the base ‘jquery.js’ file thinking my base ‘jquery-1.3.2-vsdoc2.js’ would be fine. Nope. Once changed, it worked fine. Thanks.

First off, thank you Alex for posting this. You’re a lifesaver!

@Dave, I am looking to do the same exact thing and was also wondering if there are any built-in functions to handle this. It appears as though it’ll require editing the JS file so that it can accept a link in the panel and not just in the filmstrip.

If anyone out there has done this already, any advice would be helpful. I’ll be taking a shot at it this afternoon and will post back if I get it working.

I have solve the last time posting problem. Now the problem is when i set the panel height to 300px but the image is 200px, the images is position in the center of panel, is there any way to show on top position.

Can someone please help with the problem that Dave and I hare having? It seems like adding links to the panel image would be a no-brainer (really, who wants links on the thumbnail), but nothing seems to work.

Anyone have luck with this?

@Wade, Tom and Dave

I don’t have time to test this at the minute, and this may or may not work. You could try setting the panel overlay to the full size of the image, and try wrapping that in your anchor tag.

hey andrew… first of all thanks for all the work you have done with this plugin…and answering peoples questions….

my question is… is IE my opacity transitions are not working. i didn’t know if you had any ideas.???

I also had the problem with the transitions (just IE8) and after a few hours I just could solve it with an ugly hack.
The transitions seem not to work with IE8 if you have set a doctype. You have to force the compatibility mode with the following tag:

I’m working on a page using this gallery, but none of the navigation arrows show up. I guess my problem is that I have separate folders for js, images, css, and the html in the root folder.

No matter where I put the themes folder, it doesn’t like it. I even placed a copy in the root, css, js, and the images folder. I’ve tried setting the theme using nav_theme, and I’ve also tried to play around with theme_path, but neither of those things help at all. Anyone have any ideas for me that I haven’t tried yet?

Thanks for posting this, very helpful!

Thanks so much for posting this! I really wanted to use 2.0 (since I don’t have to generate my own thumbnails) but there were no instructions on what the new syntax was.

Thanks this helped a lot!

Is it possible to have the overlay hidden on default and then have it show up when the mouse hovers over the panel?

For an project I had to build and populate the image list via JSON and each(). Unfortunately the galleryview plugin won’t work correctly on Internet Explorer and Safari 4.0.3 in this specific case.

But there is a solution: Replace the $(window).load() function with the $(document).ready() function in the plugin. So all browsers will wait for the content before trying to build the gallery.

Hope that helps someone.

Fixed last one, no idea what it was just decided to start working, however I am having 2 other problems..

1) It always ignores the last image, so if I have 4, it will only show 3 in the filmstrip, but will loop through all 4, this is same if I use your example as well.

2) The filmstrip doesn’t seem to work correctly, its jumping all over the place, instead of just going to the next one smoothly.

Any ideas?

Hi,

I am new to css and js.
I want to show filmstrip vertically. How can i do ?

Thanks for posting this have been struggling to get v2 up and running on my site

Tim

Hi, I want to add play/push button. How can i add ?

thanks Andrew for setting this up

I have one question:

How hard would it be to seperate the panels from the filmstrip?
- im trying to get the filmstrip into another div that slides up and down (hides/unhides thefilmstrip)

I cant make it work

@david @craig

I was having the same problem with the loader graphic not appearing until just moments before the page finished loading. I’m sure there are more elegant solutions, but I fixed this by wrapping my list in a new div that is the same width and height as the slideshow, setting the overflow to hidden, and using the loader.gif image as the background. This makes the loader graphic appear right when the page starts loading (and prevents the loading images from stretching the page down), and then it gets covered when the slideshow finally loads.

One thing to keep in mind though is that non-JS users will get stuck on this loader graphic, so I added the class to the new wrapper div with jquery so it never gets loaded to users without javascript. You can check it out here: http://www.ryangarrettphotography.com/

I’m sure it would work better if the actual plugin were fixed to solve this problem (I still occasionally see the unstyled images load before the fix kicks in), but this seems to get it closer to the ideal behavior.

Sorry, code got left off.. I meant ” had the script running in the HEAD section of the page, whereas it should have been running at the bottom of the page, just before end of BODY….

David

Hi All,

I resolved the problem with a simple piece of code and here ii is:

//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$(document).ready(function(){
$(‘#photos’).galleryView({
//gallery stuff
});
});
})(jQuery);

I hope this helps someone.

Llewellyn

Hi,
I passed foll. from HTML file and pass 4 images in b/w ‘ul’ tag with ‘li’ tag but when had done view source then there was a 12 ‘li’ tag.
How logic is working in .js file.

Anyone have idea ?

$(document).ready(function(){
$(‘#gallery’).galleryView({
panel_width: 540,
panel_height: 257,
overlay_opacity:1,
frame_opacity:1,
frame_width: 75,
frame_height: 75,
frame_scale: ‘crop’,
show_filmstrip: true,
transition_speed: ’slow’,
transition_interval: 5000,
background_color: ‘transparent’,
border: ‘none’,
easing: ‘easeOutBounce’,
nav_theme: ‘dark’,
pause_on_hover: false,
filmstrip_size: 2,
frame_gap: 12,
start_frame: 1,
filmstrip_position:’right’ });
});

hi, anybody knows how to use this plugin dynamically?
for instance, I append photo url and title dynamically to , then assign galleryview function to it. I tried in vein.
code as following:
$(“title”).appendTo(“#gallery”);
$(‘#gallery’).galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 50,
frame_height: 50,
transition_speed: 350,
easing: ‘easeInOutQuad’,
transition_interval: 0
});

@Leigh,

Hi Leigh,

Have you tried inserting a tag for each of your main images – linking to the correct page/profile/image you want it to go to?

Have not tried it in gallery-view, but off the top of my head, it should work I think… do you have any example code I could look at?

David

@David If you want to post code, you can stick it inside <code></code> tags but because you can post actual HTML, you will need to use the unicode entities for < (&lt;) and >(&gt;).

I should probably make that clear on the comment form…

–Andy

@David

Live comment preview and AJAX-y comment posting are actually on the to-do list. Although not for a while I think — there always seems to be something more pressing to do!

I’ve choose to hide my filmstrip. My gallery has rounded corners so I am using an image for my text panel. Unfortunately this isn’t working very well in IE8 as the transitions between the text happen abruptly and overlap one another.

I’m also using PNGs with transparency for my Next and Previous buttons, but they are also suffering from issues mentioned on the GalleryView site. The edges aren’t transparent until the opacity hits 100%. So when the buttons are fading in and out a black outline is visible. It only goes away when they reach full opacity which I have set at 100% instead of the default 70% or whatever it is.

There was some mention of a PNG fix on the GV site, but I can’t seem to make it work. Has anyone else figured this out by any chance? Your feedback would be much appreciated as I am struggling to the point where I may just have to ditch this in favor of a flash based solution like SlideShow pro or similar.

@Eddie,

Hi Eddie, I took a look at your page, and two things hit me straight away:

1. You’re using an older version of the gallery-view plugin
2. You creating your gallery using divs which is how Jack Anderson did his.

I copied off your code (if that’s ok with you) and had a fiddle around with it, using the v2.0 gallery view plugin – and then also used A.A’s way of designing the gallery using unordered lists as opposed to divs – got it working for you and you can see it here:

http://www.davidclothier.eu/jquerytest/punchtank/punchtank.htm

It might look a little off in some places, as I’m referencing your styles.css file over the web, so don’t have access to some of the icons/images etc, but the gallery works the way you want it to (I think!).

Feel free to grab the code and use it for yourself if you want, and then also let me know once you’re done with it and I’ll take the mock up page down for you too.

Also, post back if you have problems,
David

@David,
Thank you so much for your help. I was able to get it working. I ended up using the dark theme from the previous jQuery version (the next/previous pointers) because I like the round ones better. One more question.
1. How can I change the opacity of the black caption box? I need to make it darker so the text is legible.

Thanks!

@Eddie,

Glad you got it up and running ok – took a look at your site and it looks much better now

Ok, to change the opacity, add the following to your script on the page:

overlay_opacity: 0.5,

(substitute the 0.5 for anything from 0.1 up until 1.0 until you get your desired effect, also leave out the comma if it’s the last in your list!)

So, your code would look like this for instance:

$(document).ready(function(){
$('#photos').galleryView({
show_filmstrip: false,
panel_width: 800,
panel_height: 300,
transition_speed: 1500,
transition_interval: 5000,
nav_theme: 'dark',
border: '1px solid white',
pause_on_hover: true,
overlay_opacity: 0.5
});
});


There are other configuration options/considerations here:

http://spaceforaname.com/galleryview#options

As I said, play around with different values until you find the one that suits you best…. as an aside though, your h2 text is very dark as it is, so making the overlay darker will make it harder to read the heading for each image…. so, you either need to make the opacity less (i.e. more transparent), make the h2 text a lighter colour, or make the overlay a different colour (see the “.panel .overlay-background” background colour settings in your gallery view css).

Hope this helps,
David

Hi,

Very nice plugin. Can we use flash video or any other video instead of images ?

Actually, I upgraded to 2.0 and I am struggling to get the animation to work.

http://equitogs.webtise.net/

For some reason it is not cycling through one by one.

sorry. I’m an idiot. screwed up the path to my CSS file.

Has anybody made a full blown working WordPress plugin for NextGEN Gallery from 2.0 yet? I had one for 1.0.1, but it doesn’t work all that well.

Hello! Has anyone tried to add support for right-aligned overlays?

First – Thanks for the info!

I have 2 issues that I can not overcome.

1) How can I make the filmstrip current frame stationary and have the clips move into the frame (like the 1.1 Default Impimentation).

2) Is there a way to stop the messy loading of everything, everytime I go to my gallery page.

Once again thanks for the clarification with 2.0!

hello,

i have a 3-part question:

1. has anyone figured out how to optimize preloading of images in your gallery? i’ve used all the js and css tricks, but unfortunately there is still some lag time in loading the images.

2. it was suggested that i use “document.ready’ instead of “window.load” before building the gallery, however when i use the full plugin for development (not the pack.js), my thumbnails no longer look normal. any ideas why this is happening?

3. i have tried using the loader.gif as a background image in a separate div to fudge the appearance of loading, however it still appears behind every image as i click through the gallery. has anyone resolved this as well?

thanks so much in advance for your help!

Hey thanks for putting up an example of the GalleryView 2.0 plugin. I was just wondering if you or anyone had any ideas on getting the thumbnails to be left aligned rather than centred.

I’m trying to use the Gallery View 2.0 together with the PrettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/), but does not work. Does anyone know how I can use the two together. Thank you.

Thanks for taking the time to piece this together and share it with everyone… it was a HUGE help!!

Hello there,
I’m desesperately turning to you with a problem i can’t solve with galleryview.
It works perfectly and i’m using it as a content shower for my site.

My problem is that i would like to call the private function showItem(i) from outside of the plugin, I’m not easy with javascript and none of my tries succeeded.

Perhaps do you know the code to add to the plugin to be able to do that ?
The thing is that i really must be able to switch panels depending on links clicked in the content dynamically showed.

Best reguards,
Leloup

you are my hero

Hei, I have one question: can I make the panel width fixed to 900px and let the height to automatically resized accordingly…?

My problem now the height is always fixed at 400px and the width resized accordingly. I want the vice versa effect. I already set the panel_width to 900 but it’s still won’t work.

Thank you before…