A project I am working on requires a JavaScript image rotating gallery, so I took a look at the jQuery plugins page to see what was available.
I settled on Gallery View by Jack Anderson. Unfortunately the latest version of this plugin came with no instructions (due to a problem with the author’s web host, I think). After some playing around and asking a few questions on Twitter (thanks @leepowell) I was able to work it out.
I noticed a large number of people commenting on Jack’s site with the same problems I faced, so I decided to put up a simple example page.
Update
The options available in the $(document).ready section have changed slightly from those listed for version 1.x.
Since a few people have asked, I have put together a quick list for reference. This includes all of the new options and excludes older, depreciated options — it can be found here.
thanks a bunch for the demo markup.
That’s incredibly timely for a project I’m working on at the moment.
I really appreciate it.
Based on the popularity of this plugin, I hope Jack is able to get the content back up on his site soon. Until then, I’m sure your example will be invaluable. Cheers!
Thanks for putting up the gallery. I have been looking for an example for a while.
Hi and thanks, i used version 1.0 some time ago, just wondering what the main differences between v1.0 and v2.0? What benefits does it provide? Thanks alot, just wondering whether i bother to upgrade
@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.
Andrew,
We just finished implementing the Panels Only – Lightbox Style Gallery version on our demo sandbox site, and are getting ready to migrate to our beta site. Looks great in Chrome, but has the herky jerkies in IE 7 & 8… the photo transitions nicely, but the caption panel transition isn’t pretty.
Can you help?
Thx
@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?
Hey andrew – thanks for your example – I was able to get mine up and running.
I do have a small problem I’m trying to fix though – any ideas?
I want the filmstrip with thumbnails at the bottom (which currently is working), but I ALSO want the next image previous image links to show up on top of the main photo… the only way I can figure out how to do this currently is by disabling the filmstrip.
Is there a way to have both enabled at the same time?
@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.
I think I figured out, had to edit the galleryview.js file to do it though.
I simply replaced every instance of “!opts.show_filmstrip” with “opts.show_filmstrip”
This may have changed something else as well but as far as I can tell it all seems to function the same way, but now the prev/next arrows show up for the filmstrip & the photo panel.
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?
@Marcus Andersson. It’s pretty straightforward, just add:
show_filmstrip: false,To your (document).ready function, like this:
$(document).ready(function(){
$('#photos').galleryView({
show_filmstrip: false,
//other options here
});
});
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
Nice to see that you put up the example page. I had to use the 1.1 version for project recently when I didn’t find any valid markup for the 2.0.
I understand that it’s good that galleryview generate the filmstrip but do you know if it’s possibly to have other pictures instead of the automatically generated?
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”.
@Marcus Andersson
I haven’t used thickbox before, but from looking at the demo page quickly it looks like you just need a link to trigger the box.
If this is correct, I’d suggest adding a link in the panel-overlay span element for each image.
Ideally I guess you would want each gallery image to link to thickbox, but it seems gallery view looses the link if you try to apply it in the markup. For this you would probably need to get into the js file and add it yourself.
@ 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.
Hi there,
You really helped me out on this one! Thanks far the help!
I still have some questions though:
I have multiple images in a db and want to show those via GalleryView. I tried but I can’t seem to get it working:
<?php
$sql = "SELECT id,wk_nr,strip_nr,img_url FROM rs_cartoon_de_rechter ORDER BY id DESC";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs)) {
print '’.$row['strip_nr'].”;
print ”;
print ”;
}
?>
What am I doing wrong?
Second question:
Why isn’t the overlay_height function working?
@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.
Hi there,
So I took your advice and i created the gallery exactly how you did it aswell. Everything works just fine.
I use GalleryView to display my uploaded pics. When the pics are all the same size it works just fine but when sizes vary thats when it goes wrong: pictures are not horizontally aligned in the center but to the right.
Is there any way I can display the images in the center instead of to the right?
This is what it looks like:
http://img34.imageshack.us/i/galleryviewnotaligned.jpg/
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!
@joshua
You need to set the appropriate options in your (document).ready function. In your case it would look something like this:
$(document).ready(function(){
$('#photos').galleryView({
transition_interval: 5000,
//other options here
});
});
This gives an interval of 5000ms. Set it to 0 for no automatic transitions.
I have put up a table of all options applicable to version 2.0 here.
Thanks for the help andrew, it really saved my time.
thanks Andrew it helped.
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?
just wanted to say thanks for the effort.
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
hi thanks you I have version 2.0 working!
but still prefer version 1.1
I there a way to have the opacity effect in the filmstrip in version
1.1 like 2.0
Thanks
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.
Can anyone out there link to their working site so I can view your source code…please?
@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.
I just got V2 working, thanks for the great example!! I can ‘t seem to get the arrow to slide to the next picture like your example. Mine moves the pictures into the box with the arrow above it. What am I missing? Here is a link to my page http://www.hersheysymphony.org/photo_gallery2/
Thanks!
@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.
Ah, ok, that explains it. I also noticed that in IE (7), my nav menu at the top that has dropdowns, is falling behind the images. Any way to fix that?
Thanks!!!
@Jason
Not too sure, you could try playing with z-index maybe?
Yeah, i already have z-index’s on the mene items, and it’s not helping anything.
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.
@Calvin
You would need all of the js/css calls in your site’s head section. in WordPress this is usually the header.php file for your theme. To get the gallery to show in the sidebar, add the actual markup to your sidebar.php file (if your theme has one).
@Bucky Edgett, @john
To show filmstrip captions you need two things. First, add the option
show_captions= true,to your (document).ready function. Next, add atitle="whatever"attribute to each image. The contents of the title attribute should show up as the filmstrip caption.@Nick
No idea on the IE7 question, for the border question I think you can edit the CSS file in 2.0. Not sure about version 1 though.
@Craig
Difficult to pin down without seeing an example – do you have your (document).ready script in the head of the page?
just wanted to say thanks for the effort.;. All the best!!
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.
Hi, the view control is supreme, after i change to 2.0, the filmstrips markup is remove, however how am i gonna show the caption text below filmstrips.
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?
Is there a way in version 1 to remove the border around the frame so you just have the arrow? I have looked thru the js and cant seem to find it.
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.
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.
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.
thanks, thanks, thanks.
I was using the old HTML for a full day and not understanding why things weren’t working.
thanks, thanks, thanks.
I was using the old HTML for a full day and not understanding why things weren’t working.
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.
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.
Any idea how to make the panel picture (the big one) clickable to a URL? I want to use it on my homepage to take visitors to content, and it’s annoying that I can only add a link to the caption area. I’m using version 2; if I add a link to the image in the HTML, it makes the thumbnail link to a URL but not the panel picture…. much thanks!
Any idea how to make the panel picture (the big one) clickable to a URL? I want to use it on my homepage to take visitors to content, and it’s annoying that I can only add a link to the caption area. I’m using version 2; if I add a link to the image in the HTML, it makes the thumbnail link to a URL but not the panel picture…. much 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.
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’ve been trying to make the panel picture click-able, but nothing works. I tried assigning a JavaScript call to the “panel-overlay”. It works on the first image, but not on subsequent images. I tried applying an image map to each image, but it magically gets applied to the film strip, rather than the panel.
Still trying to figure out how it even grabs the a href link attribute and applies it to the film strip so that it can then be moved to the panel.
Any ideas?
I’ve been trying to make the panel picture click-able, but nothing works. I tried assigning a JavaScript call to the “panel-overlay”. It works on the first image, but not on subsequent images. I tried applying an image map to each image, but it magically gets applied to the film strip, rather than the panel.
Still trying to figure out how it even grabs the a href link attribute and applies it to the film strip so that it can then be moved to the panel.
Any ideas?
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.
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.
Hi,
Thanks Andrew for the html markup it helped a great deal. Would like to also find out if anyone had any idea on how to go about having the image thumbnail different to the main image?
Hi,
Thanks Andrew for the html markup it helped a great deal. Would like to also find out if anyone had any idea on how to go about having the image thumbnail different to the main image?
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?
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?
Excellent implementation but without being able to link the main image this becomes a very limited app.
I’m looking for exactly what Tom & Dave are looking to do, though linking to lightbox for a larger slide.
@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.
Excellent implementation but without being able to link the main image this becomes a very limited app.
I’m looking for exactly what Tom & Dave are looking to do, though linking to lightbox for a larger slide.
@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.
Thanks for the reply, Andrew. What you suggested, adding exact size to the panel overlay, then wrapping it with the anchor tag, didn’t quite work. When you wrap the anchor link around the span tag, the thumbnails no longer show up and the auto-rotation skips those slides.
What did work, however, is setting the exact size and using an onclick window.location call on the span tag. I also added the cursor style attribute as well (so it looks like a link).
I hope this helps. I’ll post the site URL here once it’s live to the public.
Thanks again for your help, Andrew.
Thanks for the reply, Andrew. What you suggested, adding exact size to the panel overlay, then wrapping it with the anchor tag, didn’t quite work. When you wrap the anchor link around the span tag, the thumbnails no longer show up and the auto-rotation skips those slides.
What did work, however, is setting the exact size and using an onclick window.location call on the span tag. I also added the cursor style attribute as well (so it looks like a link).
I hope this helps. I’ll post the site URL here once it’s live to the public.
Thanks again for your help, Andrew.
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.???
@john
Not too sure what your problem could be without an example to look at. I have just checked and my example page works with fading opacity in IE6 and above.
Perhaps try starting with the basic page and adding your stuff to it step by step until the opacity fade breaks?
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.???
@john
Not too sure what your problem could be without an example to look at. I have just checked and my example page works with fading opacity in IE6 and above.
Perhaps try starting with the basic page and adding your stuff to it step by step until the opacity fade breaks?
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 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:
meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
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?
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?
Actually, scratch that. If you have a set up like mine, you can just place the themes folder in the js folder and not do anything with the nav_theme or theme_path stuff, and it will work. I don’t know what stopped it from working earlier.
Actually, scratch that. If you have a set up like mine, you can just place the themes folder in the js folder and not do anything with the nav_theme or theme_path stuff, and it will work. I don’t know what stopped it from working earlier.
Thanks for posting this, very helpful!
Thanks for posting this, very helpful!
The site I was referencing is up (click on my name). The big panels are linked. Anyone have any thoughts as to why it seems to load all of the images, then sucks them up into the Gallery? I notice that it doesn’t it for the example, but on my site it seems to.
I’d still like a more elegant solution to linking in the big panel. My method is a little kludgy.
The site I was referencing is up (click on my name). The big panels are linked. Anyone have any thoughts as to why it seems to load all of the images, then sucks them up into the Gallery? I notice that it doesn’t it for the example, but on my site it seems to.
I’d still like a more elegant solution to linking in the big panel. My method is a little kludgy.
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 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.
Thank so much for this example!
Saved me so much time.
Thank so much for this example!
Saved me so much time.
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?
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?
Great Post. Thanks for the much needed help. It’s easy to get confused with the different versions of plugins since its original release.
Great Post. Thanks for the much needed help. It’s easy to get confused with the different versions of plugins since its original release.
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.
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.
I have a strange problem with this…
It works great when I just use static images, displays them no problem, however as soon as I implement a loop (php) the images don’t show up, although the code is identical in the source… I have the following:
This is an overlay too
If I take the foreach loop out, and replace the variables with the actual name that the loop replaces.. the images work, as I said, the source shows them there, but they just don’t appear…
Any ideas??
Kev
I have a strange problem with this…
It works great when I just use static images, displays them no problem, however as soon as I implement a loop (php) the images don’t show up, although the code is identical in the source… I have the following:
This is an overlay too
If I take the foreach loop out, and replace the variables with the actual name that the loop replaces.. the images work, as I said, the source shows them there, but they just don’t appear…
Any ideas??
Kev
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?
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?
Your example really helped me adapt the plugin to the site I’m working on – thanks so much. I was wondering if anyone knows how to change the position of the navigation buttons so that they aren’t stuck to the right and left sides of the panels. I’m using the plugin as a lightbox style gallery with no filmstrip and large photos, so on smaller resolution screens you have to scroll to see the buttons. I’ve tried changing some ‘right’ and ‘left’ values within js.galleryview-2.0.js to no avail so far.
Your example really helped me adapt the plugin to the site I’m working on – thanks so much. I was wondering if anyone knows how to change the position of the navigation buttons so that they aren’t stuck to the right and left sides of the panels. I’m using the plugin as a lightbox style gallery with no filmstrip and large photos, so on smaller resolution screens you have to scroll to see the buttons. I’ve tried changing some ‘right’ and ‘left’ values within js.galleryview-2.0.js to no avail so far.
Hi,
I am new to css and js.
I want to show filmstrip vertically. How can i do ?
Hi,
I am new to css and js.
I want to show filmstrip vertically. How can i do ?
Hi Andrew,
As with all the other people here – thanks so much for your work on this – I’m using on a site I’m building for some friends, you can see it here: http://www.liamisdivecentre.com/beta2/default.html
I have a quick query that perhaps you can dispel…. it seems to me that the page is loading all the images before showing the gallery; this would normally be fine – but it’s not showing the loading bar while this is happening? I do see the loading bar, but only very briefly, once it’s loaded all the images – so it kinda flickers the loading bar on just before showing the gallery (by which time it’s too late as the images have already loaded on the browser end).
Is there a way to correct this and show the loader while the browser is busy downloading the rest of the files please?
Thanks in advance,
David
Hi Andrew,
As with all the other people here – thanks so much for your work on this – I’m using on a site I’m building for some friends, you can see it here: http://www.liamisdivecentre.com/beta2/default.html
I have a quick query that perhaps you can dispel…. it seems to me that the page is loading all the images before showing the gallery; this would normally be fine – but it’s not showing the loading bar while this is happening? I do see the loading bar, but only very briefly, once it’s loaded all the images – so it kinda flickers the loading bar on just before showing the gallery (by which time it’s too late as the images have already loaded on the browser end).
Is there a way to correct this and show the loader while the browser is busy downloading the rest of the files please?
Thanks in advance,
David
Thanks for posting this have been struggling to get v2 up and running on my site
Tim
Thanks for posting this have been struggling to get v2 up and running on my site
Tim
Hi
Thanks for creating V2 , but when i downloaded full js from jquery’s site then it stoped working.
I want to add some code in v2 js , how can i do ?
Hi
Thanks for creating V2 , but when i downloaded full js from jquery’s site then it stoped working.
I want to add some code in v2 js , how can i do ?
Hi, I want to add play/push button. How can i add ?
Hi, I want to add play/push button. How can i add ?
Just wanted to add my thanks too. Was a bit lost with the new implementation but you’re example sorted me out! Cheers
Just wanted to add my thanks too. Was a bit lost with the new implementation but you’re example sorted me out! Cheers
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
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
This is amazing. Thank you so very much!
This is amazing. Thank you so very much!
@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.
@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.
@Mike,
Thanks for your post – I’ve rejigged my implementation of gallery-view with your tips above and it seems to work well enough!
One thing I also noticed – schoolboy error on my part – I had the script running in the section of the page, whereas it should have been running at the bottom of the page, just before This made the other elements on the page (other than the gallery etc) load a little quicker too.
I’ll keep it this (your) way until a fix to the plugin is available, so ‘thanks’ again for your input – much appreciated.
David
@Mike,
Thanks for your post – I’ve rejigged my implementation of gallery-view with your tips above and it seems to work well enough!
One thing I also noticed – schoolboy error on my part – I had the script running in the section of the page, whereas it should have been running at the bottom of the page, just before This made the other elements on the page (other than the gallery etc) load a little quicker too.
I’ll keep it this (your) way until a fix to the plugin is available, so ‘thanks’ again for your input – much appreciated.
David
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
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
How do I gat just the film strip in version 2? Seeinf that version 1.1 has a problem on my site in Google Chrome 3.0.
Any help would be great thanks.
Llewellyn
How do I gat just the film strip in version 2? Seeinf that version 1.1 has a problem on my site in Google Chrome 3.0.
Any help would be great thanks.
Llewellyn
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 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 with but when had done view source then there was a 12 .
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,
I passed foll. from HTML file and pass 4 images in b/w with but when had done view source then there was a 12 .
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,
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,
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’ });
});
@Mike – thanks for that solution. I was wondering what I’d do about the loader as well.
Does anyone know how I could make this gallery scalable according to the size of the browser window?
@Mike – thanks for that solution. I was wondering what I’d do about the loader as well.
Does anyone know how I could make this gallery scalable according to the size of the browser window?
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
});
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
});
Hi,
Thank you so much for suppliying the demo for version 2.
Just one quick question, can anyone assistment to link from the main image in the gallery?
I am using this for a community site and profiles will appear in the gallery.
Thank in advance.
Leigh
Hi,
Thank you so much for suppliying the demo for version 2.
Just one quick question, can anyone assistment to link from the main image in the gallery?
I am using this for a community site and profiles will appear in the gallery.
Thank in advance.
Leigh
@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
@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
@Leigh,
Sorry, code gets stripped off of here, I keep forgetting – the above should read “inserting an ‘a href’ tag for each..”
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 < (<) and >(>).I should probably make that clear on the comment form…
–Andy
@Leigh,
Sorry, code gets stripped off of here, I keep forgetting – the above should read “inserting an ‘a href’ tag for each..”
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 < (<) and >(>).I should probably make that clear on the comment form…
–Andy
Thanks Andrew, I knew I was doin’ something wrong!
I think in my case a preview of the comment would be useful
– would help me pick up the mistakes I keep making. lol.
David
@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!
Thanks Andrew, I knew I was doin’ something wrong!
I think in my case a preview of the comment would be useful
– would help me pick up the mistakes I keep making. lol.
David
@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!
Hi Everyone,
I am hoping someone can help me. (hint: Andrew Appleton) I need help with this page http://www.punchtank.com/print_design.htm displaying the “Panels Only – Lightbox Style Gallery”.
Thank you everyone in advance.
Hi Everyone,
I am hoping someone can help me. (hint: Andrew Appleton) I need help with this page http://www.punchtank.com/print_design.htm displaying the “Panels Only – Lightbox Style Gallery”.
Thank you everyone in advance.
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.
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.
Actually I just put back the default background colour instead of an image in the overlay, but the text transitions are still really rough in IE8. The text overlaps each other and does not fade nicely.
Actually I just put back the default background colour instead of an image in the overlay, but the text transitions are still really rough in IE8. The text overlaps each other and does not fade nicely.
@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
@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
@Eddie,
Forgot to mention that v2.0 is available here for you to download: http://plugins.jquery.com/project/galleryview
DC
@Eddie,
Forgot to mention that v2.0 is available here for you to download: http://plugins.jquery.com/project/galleryview
DC
@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!
@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, the opacity is controlled with overlay_opacity: 0.6 where the 0.6 represents 60% opacity. Try 0.7 or 0.8 or whatever if you need it darker.
http://spreadsheets.google.com/ccc?key=0AldWG3PYac5cdF92Rl9oemlhbDBTdllQQWRVaGlQbEE&hl=en_GB << all variables are here.
Has anyone managed to conquer the poor transitions that happen in IE8?
I've managed to get everything working by using the packed version of the .js file. The unpacked dev version just doesn't work in IE6.
Also, is there a way to disable the prev/next buttons altogether?
Thanks.
Eddie, the opacity is controlled with overlay_opacity: 0.6 where the 0.6 represents 60% opacity. Try 0.7 or 0.8 or whatever if you need it darker.
http://spreadsheets.google.com/ccc?key=0AldWG3PYac5cdF92Rl9oemlhbDBTdllQQWRVaGlQbEE&hl=en_GB << all variables are here.
Has anyone managed to conquer the poor transitions that happen in IE8?
I've managed to get everything working by using the packed version of the .js file. The unpacked dev version just doesn't work in IE6.
Also, is there a way to disable the prev/next buttons altogether?
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
@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
@David
Thanks you. I got this page done. Now I have to work on the rest. You are a life saver.
Happy Holidays!
@David
Thanks you. I got this page done. Now I have to work on the rest. You are a life saver.
Happy Holidays!
Hi,
Very nice plugin. Can we use flash video or any other video instead of images ?
Hi,
Very nice plugin. Can we use flash video or any other video instead of images ?
Hi,
Any idea why this isn’t working in IE7?
http://equitogs.webtise.net/
Nick
Hi,
Any idea why this isn’t working in IE7?
http://equitogs.webtise.net/
Nick
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.
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.
Hello,
Thank you for putting this together. It really helped in getting a working version of GalleryView. I have encountered one problem though. I can not seem to get the overlay background to show up. The text is always at the bottom and there is no background. I tried CSS modifications and the JS argument (but you mentioned its depriciated). Any ideas? I basically just changed the colors and added some cycling.
Thanks and I love your site here.
E.
Hello,
Thank you for putting this together. It really helped in getting a working version of GalleryView. I have encountered one problem though. I can not seem to get the overlay background to show up. The text is always at the bottom and there is no background. I tried CSS modifications and the JS argument (but you mentioned its depriciated). Any ideas? I basically just changed the colors and added some cycling.
Thanks and I love your site here.
E.
sorry. I’m an idiot. screwed up the path to my CSS file.
sorry. I’m an idiot. screwed up the path to my CSS file.
hi how can i change it to Filmstrip Only w/ External Links?
thanks for this gallery ^^
hi how can i change it to Filmstrip Only w/ External Links?
thanks for this gallery ^^
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.
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.
Thanks for the working example
Thanks for the working example
Hello! Has anyone tried to add support for right-aligned overlays?
Hello! Has anyone tried to add support for right-aligned overlays?
Thanks a lot for these informations. I was trying to integrate the gallery to Yii framework.
I first thought that I could make my gallery work by using other forms of parameters, but in fact I needed to recheck also the html markers I was using to make it work.
Using the source of your galleryview, I was able to do that.
Very helpful !
Thanks a lot for these informations. I was trying to integrate the gallery to Yii framework.
I first thought that I could make my gallery work by using other forms of parameters, but in fact I needed to recheck also the html markers I was using to make it work.
Using the source of your galleryview, I was able to do that.
Very helpful !
@Calvin
You would need all of the js/css calls in your site’s head section. in WordPress this is usually the header.php file for your theme. To get the gallery to show in the sidebar, add the actual markup to your sidebar.php file (if your theme has one).
@Bucky Edgett, @john
To show filmstrip captions you need two things. First, add the option
show_captions= true,to your (document).ready function. Next, add atitle="whatever"attribute to each image. The contents of the title attribute should show up as the filmstrip caption.@Nick
No idea on the IE7 question, for the border question I think you can edit the CSS file in 2.0. Not sure about version 1 though.
@Craig
Difficult to pin down without seeing an example – do you have your (document).ready script in the head of the page?
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!
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!
I’ve encountered a weird bug. Once the gallery loads, the image arrow indicator flew right out of the panel width. If I activated the next thumbnail, the arrow moves right again. This causes a horizontal scrollbar.
Some help with this would be much appreciated.
I’ve encountered a weird bug. Once the gallery loads, the image arrow indicator flew right out of the panel width. If I activated the next thumbnail, the arrow moves right again. This causes a horizontal scrollbar.
Some help with this would be much appreciated.
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!
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!
this is the site i’m building for a client– thanks again!
this is the site i’m building for a client– thanks again!
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.
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.
Pingback: GalleryView JQuery Plugin 2.0 Example
Pingback: GalleryView JQuery Plugin 2.0 Example
The easing effects are not working properly on large galleries, why?
The easing effects are not working properly on large galleries, why?
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.
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… really appreciate it!!
Thanks for taking the time to piece this together and share it with everyone… really appreciate it!!
Thanks for taking the time to piece this together and share it with everyone… it was a HUGE help!!
Thanks for taking the time to piece this together and share it with everyone… it was a HUGE help!!
I’ve downloaded this from JQuery but I see in your demo that you have a triangle image over the flimstrip.. where is the image located and how will is it not in the main download?
I’ve downloaded this from JQuery but I see in your demo that you have a triangle image over the flimstrip.. where is the image located and how will is it not in the main download?
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
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
Has anyone found a way to put more than one gallery on the same page?
Thanks in advance!!
-=BEN=-
Has anyone found a way to put more than one gallery on the same page?
Thanks in advance!!
-=BEN=-
you are my hero
you are my hero
Finally!
I’ve been searching for custom GalleryView with hover-opacity Filmstrip!
Now all I need is to change the position of next-prev button to below the filmstrip and remove the triangle/pointer image from the filmstrip…
Finally!
I’ve been searching for custom GalleryView with hover-opacity Filmstrip!
Now all I need is to change the position of next-prev button to below the filmstrip and remove the triangle/pointer image from the filmstrip…
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…
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…
Thanks, 2 questions:
1. is it possible to update gallery from javascript (to add another overlay) with append or something like that ? … or to refresh the ul with ajax ?
2. i have the gallery inside a div that has style (display:none) … when i click on a button the div’s style is set tot (display:block), the loader appears but the gallery doesn’t load … any solution ?
Thanks, 2 questions:
1. is it possible to update gallery from javascript (to add another overlay) with append or something like that ? … or to refresh the ul with ajax ?
2. i have the gallery inside a div that has style (display:none) … when i click on a button the div’s style is set tot (display:block), the loader appears but the gallery doesn’t load … any solution ?
Thanks for this page Andrew, it was most helpful for the 2.0 revision.
On a separate note, for those who wanted to have a “clickable” panel images in rev 2.0, i made a patch for that and it seems to be working.
you can find it “www.ifawzi.com/content/galleryview-make-images-clickable”
I have done limited testing on it, namely on firefox only, so please test it out first.
if you do find problems with it, please leave me a note…
Thanks for this page Andrew, it was most helpful for the 2.0 revision.
On a separate note, for those who wanted to have a “clickable” panel images in rev 2.0, i made a patch for that and it seems to be working.
you can find it “www.ifawzi.com/content/galleryview-make-images-clickable”
I have done limited testing on it, namely on firefox only, so please test it out first.
if you do find problems with it, please leave me a note…
I want to display multiple galleryview on a single page, it does not seem to be working, only one is working. Any help will be greately appreciated.
script is as follows
$(document).ready(function(){
$(‘#photos, #photos1′).galleryView({
filmstrip_size: 3,
frame_width: 239,
frame_height: 113,
background_color: ‘transparent’,
nav_theme: ‘dark’,
border: ‘none’,
show_captions:true,
caption_text_color: ‘black’
});
});
I want to display multiple galleryview on a single page, it does not seem to be working, only one is working. Any help will be greately appreciated.
script is as follows
$(document).ready(function(){
$(‘#photos, #photos1′).galleryView({
filmstrip_size: 3,
frame_width: 239,
frame_height: 113,
background_color: ‘transparent’,
nav_theme: ‘dark’,
border: ‘none’,
show_captions:true,
caption_text_color: ‘black’
});
});
Andrew,
Can you, or any other good soul, put up a more dummy proof instructions about using this script? I cant seem to find my way through…
Thanks…
Andrew,
Can you, or any other good soul, put up a more dummy proof instructions about using this script? I cant seem to find my way through…
Thanks…
@Bikash
I have multiple galleries working simply by copying the whole javascript block, which in your case would be:
$(document).ready(function(){
$(‘#photos′).galleryView({
filmstrip_size: 3,
frame_width: 239… etc…
});
$(‘#photos1′).galleryView({
filmstrip_size: 3,
frame_width: 239… etc…
});
});
The only problem I run into then is that it does not automatically start playing for all, only one. In fact, if you click on one, then that is the one that will start playing next. I am trying to find a fix for this but I am php minded more so than javascript.
@Andrew: Thank you for having this here. Made it very clear.
@Bikash
I have multiple galleries working simply by copying the whole javascript block, which in your case would be:
$(document).ready(function(){
$(‘#photos′).galleryView({
filmstrip_size: 3,
frame_width: 239… etc…
});
$(‘#photos1′).galleryView({
filmstrip_size: 3,
frame_width: 239… etc…
});
});
The only problem I run into then is that it does not automatically start playing for all, only one. In fact, if you click on one, then that is the one that will start playing next. I am trying to find a fix for this but I am php minded more so than javascript.
@Andrew: Thank you for having this here. Made it very clear.
Hi all,
I want to get a lightbox working with jquery-galleryview-2.0…
is it possible??
please do give me a suggestion on this…
Hi all,
I want to get a lightbox working with jquery-galleryview-2.0…
is it possible??
please do give me a suggestion on this…
In your options spreadsheet, you mention that “transition_interval: 0″ would turn off automatic transitions. However, that’s not the behavior I’m getting. When I set the interval to 0, it constantly transitions, and will actually get stuck in the middle of the gallery (in my test case, it’s three images and the script gets stuck in the middle one), essentially just blinking a single images. Is there something else that needs to be turned on or off to stop this behavior?
Here’s my loading code, which works when “transition_interval” is set to something like “4000″:
$('#gallery').galleryView({
panel_width: 561,
panel_height: 238,
transition_speed: 1200,
transition_interval: 0,
nav_theme: 'dark',
border: '1px solid white',
pause_on_hover: true,
show_filmstrip: false
});
In your options spreadsheet, you mention that “transition_interval: 0″ would turn off automatic transitions. However, that’s not the behavior I’m getting. When I set the interval to 0, it constantly transitions, and will actually get stuck in the middle of the gallery (in my test case, it’s three images and the script gets stuck in the middle one), essentially just blinking a single images. Is there something else that needs to be turned on or off to stop this behavior?
Here’s my loading code, which works when “transition_interval” is set to something like “4000″:
$('#gallery').galleryView({
panel_width: 561,
panel_height: 238,
transition_speed: 1200,
transition_interval: 0,
nav_theme: 'dark',
border: '1px solid white',
pause_on_hover: true,
show_filmstrip: false
});
Hello,
Thanks for your work. I am still having problems with displaying the gallery correctly. I am trying the plugins with WordPress 3.0 default theme TwentyTen. I have played around with the options. But I can’t seem to get the gallery view to work correctly. I want it to work the same way are your example page shows. Can you please provide all of the options that you used for that? Do we have to make any changes to the css files?
Thanks.
Hello,
Thanks for your work. I am still having problems with displaying the gallery correctly. I am trying the plugins with WordPress 3.0 default theme TwentyTen. I have played around with the options. But I can’t seem to get the gallery view to work correctly. I want it to work the same way are your example page shows. Can you please provide all of the options that you used for that? Do we have to make any changes to the css files?
Thanks.
@Mike
@David
@Andrew Appleton
@BN Wiersma
Mike,
You and David and Andrew are doing an incredible job and cannot be praised enough for the assistance you have provided to everyone working with Jack’s GalleryView 2.X and I add my Thanks for what I have been able to learn via the many comments above…
I noticed that back on Aug. 18th of last year that BN Wiersma shared a problem that he was having with getting his images to be horizontally aligned… He still has his unaligned example posted at http://img34.imageshack.us/i/galleryviewnotaligned.jpg/
I am an amateur photographer retired from Corporate IT & have just begun building my GalleryView using version 2.1.1 and I am having exactly the same problem that BN Wiersma explained with my images all being horizontally aligned to the right of the Gallery Panel instead of centered. You can see an example of my issue http://digitalreflections.com/digitalreflections/
I noticed that you have resolved this issue on the website you built http://www.ryangarrettphotography.com/
Besides resolving the loaderbar issue all of your portrait and landscape images are beautifully centered in the gallery. I am not an expert webdesigner by any stretch of the imagination and understand very little about jQuery and JavaScript. I looked at your code as best as I know how and saw how you placed the
#centering_div {margin: 0 auto;}in your style.css and thein your index.php. I have added those into my program but it did not have any effect… I have spent hours trying to resolve this issue and will keep trying but am running out of ideas as to what else to try with my limited expertise… If there is any way that you or anyone else here would be willing to assist me with resolving this issue I would be extremely grateful… I can be reached directly at
De@DigitalReflections.com Thank you… De
@Mike
@David
@Andrew Appleton
@BN Wiersma
Mike,
You and David and Andrew are doing an incredible job and cannot be praised enough for the assistance you have provided to everyone working with Jack’s GalleryView 2.X and I add my Thanks for what I have been able to learn via the many comments above…
I noticed that back on Aug. 18th of last year that BN Wiersma shared a problem that he was having with getting his images to be horizontally aligned… He still has his unaligned example posted at http://img34.imageshack.us/i/galleryviewnotaligned.jpg/
I am an amateur photographer retired from Corporate IT & have just begun building my GalleryView using version 2.1.1 and I am having exactly the same problem that BN Wiersma explained with my images all being horizontally aligned to the right of the Gallery Panel instead of centered. You can see an example of my issue http://digitalreflections.com/digitalreflections/
I noticed that you have resolved this issue on the website you built http://www.ryangarrettphotography.com/
Besides resolving the loaderbar issue all of your portrait and landscape images are beautifully centered in the gallery. I am not an expert webdesigner by any stretch of the imagination and understand very little about jQuery and JavaScript. I looked at your code as best as I know how and saw how you placed the
#centering_div {margin: 0 auto;}in your style.css and thein your index.php. I have added those into my program but it did not have any effect… I have spent hours trying to resolve this issue and will keep trying but am running out of ideas as to what else to try with my limited expertise… If there is any way that you or anyone else here would be willing to assist me with resolving this issue I would be extremely grateful… I can be reached directly at
De@DigitalReflections.com Thank you… De
I’ve tried placing the themes folder in js and also in the same folder as my gallery html, but either way I just get broken images for the theme. Where is the theme supposed to actually go? I don’t want to have an otherwise nice gallery with a broken theme.
I’ve tried placing the themes folder in js and also in the same folder as my gallery html, but either way I just get broken images for the theme. Where is the theme supposed to actually go? I don’t want to have an otherwise nice gallery with a broken theme.
How can I publish more than one gallery view on a single page?
Also, from where I can download working demo code?
How can I publish more than one gallery view on a single page?
Also, from where I can download working demo code?
I got the link working on the main image…simply add this ( onClick=”document.location.href=’test.html’; ) to the image code in your html file. so if it looks like this :
( )
change it to this:
( )
take the parentheses out =)
well it works for me, im sure you can add that same line of code to the thumbnail if you wanted it to go to the same link or a different link!
I got the link working on the main image…simply add this ( onClick=”document.location.href=’test.html’; ) to the image code in your html file. so if it looks like this :
( )
change it to this:
( )
take the parentheses out =)
well it works for me, im sure you can add that same line of code to the thumbnail if you wanted it to go to the same link or a different link!
I got the link working on the main image…simply add this ( onClick=”document.location.href=’test.html’; ) to the image code in your html file. so if it looks like this :
( img src=”test.jpg” class=”panel-content” )
change it to this:
( img src=”test.jpg” class=”panel-content” onClick=”document.location.href=’test.html’;” )
take the parentheses out =)
well it works for me, im sure you can add that same line of code to the thumbnail if you wanted it to go to the same link or a different link!
I got the link working on the main image…simply add this ( onClick=”document.location.href=’test.html’; ) to the image code in your html file. so if it looks like this :
( img src=”test.jpg” class=”panel-content” )
change it to this:
( img src=”test.jpg” class=”panel-content” onClick=”document.location.href=’test.html’;” )
take the parentheses out =)
well it works for me, im sure you can add that same line of code to the thumbnail if you wanted it to go to the same link or a different link!
Hi, I’ve used your example. I’ve got a gallery displaying but nothing seems to be scrolling? What I’m i doing wrong? Does the js. need to be spcifically in a js folder? Do the scripts need to be in a specific order?
Help appreciated.
Hi, I’ve used your example. I’ve got a gallery displaying but nothing seems to be scrolling? What I’m i doing wrong? Does the js. need to be spcifically in a js folder? Do the scripts need to be in a specific order?
Help appreciated.
Hello Andrew!!
This is a really nice gallery and without using Flash! Good job!
Anyway, we are trying to use your v2.0 gallery as a WordPress plugin for NextGEN Gallery. The old one is not working anymore.
Can you please provide us with some instructions to upgrade from the current plug-in to your version? Thank you!!
Hello Andrew!!
This is a really nice gallery and without using Flash! Good job!
Anyway, we are trying to use your v2.0 gallery as a WordPress plugin for NextGEN Gallery. The old one is not working anymore.
Can you please provide us with some instructions to upgrade from the current plug-in to your version? Thank you!!
When I change in the archive jquery.galleryview-2.1.1.js
show_filmstrip: false,
in internet explorer 8.0 and 6.0 (not in 7.0)
the panel show a margin at the bottom and the transition doesn’t works (doesnt have interval or is very speed)
In safari and firefox it works but not in internet explorer.
If i delete then it works but this is very bad for other scripts that I need.
In the anterior version of galleryview 1.1. this problem doesn’t success but the version two is better for other thigs
had someone a solution for internet explorer in version 2.1.1?
When I change in the archive jquery.galleryview-2.1.1.js
show_filmstrip: false,
in internet explorer 8.0 and 6.0 (not in 7.0)
the panel show a margin at the bottom and the transition doesn’t works (doesnt have interval or is very speed)
In safari and firefox it works but not in internet explorer.
If i delete then it works but this is very bad for other scripts that I need.
In the anterior version of galleryview 1.1. this problem doesn’t success but the version two is better for other thigs
had someone a solution for internet explorer in version 2.1.1?
Hi, your example was a great help. One quick question (hopefully), When I implement the gallery with too few pictures to scroll (in my case < 9 because my width is about 900px) the filmstrip will appear however the frames will not appear in the filmstrip. I have seen it working in other examples with less pictures but i cant get it to work. I really need the gallery to use less photos so any help would be appreciated.
Hi, your example was a great help. One quick question (hopefully), When I implement the gallery with too few pictures to scroll (in my case < 9 because my width is about 900px) the filmstrip will appear however the frames will not appear in the filmstrip. I have seen it working in other examples with less pictures but i cant get it to work. I really need the gallery to use less photos so any help would be appreciated.
Nevermind! I figured it out. Thanks again
Nevermind! I figured it out. Thanks again
Hi, great gallery and thanks for hosting this while the site is down
I am trying to implement the gallery within the facebox popup
when I load the page and click my link the facebox comes up, with the gallery, but it just sits on the loading bar? any thoughts atall?
many thanks
Hi, great gallery and thanks for hosting this while the site is down
I am trying to implement the gallery within the facebox popup
when I load the page and click my link the facebox comes up, with the gallery, but it just sits on the loading bar? any thoughts atall?
many thanks
Hello,
Just wondering if you can help, i have the galleryview up and runing but I want to be able to click on the thumbnail and have the full picture pop up as an overlay like lightbox effect.
Is there a way to do this, I have implemented this in wordpress but the lightbox efffect is not working with galleryview.
Could you help.
Hello,
Just wondering if you can help, i have the galleryview up and runing but I want to be able to click on the thumbnail and have the full picture pop up as an overlay like lightbox effect.
Is there a way to do this, I have implemented this in wordpress but the lightbox efffect is not working with galleryview.
Could you help.
I have resolved this issue with the lightbox. I can now get a lightbox effect poping up when I click on the pictures in the main panel of galleryview.
I am using the Next-gen version of galleryveiw in WordPress. The nextgen lightbox does not work with it so I have to install another lightbox plugin “Colorbox”. With this, I set the nextgen effect to none as required for colorbox to work and I wrapped an anchor around the line of code on galleryview that calls the pictures from the gallery as follows
<a href = "imageURL ?>”><img src="imageURL ?>”/>
that is php coding, you can just replace them with html equivalent and that is all it takes to work.
I think it will work equally with the thumbnails too.
I have resolved this issue with the lightbox. I can now get a lightbox effect poping up when I click on the pictures in the main panel of galleryview.
I am using the Next-gen version of galleryveiw in WordPress. The nextgen lightbox does not work with it so I have to install another lightbox plugin “Colorbox”. With this, I set the nextgen effect to none as required for colorbox to work and I wrapped an anchor around the line of code on galleryview that calls the pictures from the gallery as follows
<a href = "imageURL ?>”><img src="imageURL ?>”/>
that is php coding, you can just replace them with html equivalent and that is all it takes to work.
I think it will work equally with the thumbnails too.
this is the code don’t why why it got cut off in the post. Hope this shows.
(<a href = "imageURL ?>”><img src="imageURL ?>”/> )
this is the code don’t why why it got cut off in the post. Hope this shows.
(<a href = "imageURL ?>”><img src="imageURL ?>”/> )
This is the code that got stripped off my previous post, hopefully it displays fully now.
<a href = "imageURL ?>"><img src="imageURL ?>"/>This is the code that got stripped off my previous post, hopefully it displays fully now.
<a href = "imageURL ?>"><img src="imageURL ?>"/>hi guys ,i am using galleryview 2.0 i need help , i d’t want to load all images at once in galleryview . but when user clicks on the next pointer (arrow) .
how can i ?
regards
zafar
hi guys ,i am using galleryview 2.0 i need help , i d’t want to load all images at once in galleryview . but when user clicks on the next pointer (arrow) .
how can i ?
regards
zafar
Hi.. I’ve implement galleryview in asp.net. Its working fine when it is in a simple page. But when i used thickbox inside which i want display galleryview then its not working. so is it working with thickbox or not??
Hi.. I’ve implement galleryview in asp.net. Its working fine when it is in a simple page. But when i used thickbox inside which i want display galleryview then its not working. so is it working with thickbox or not??
Hi Andrew, I saw your post on http://spaceforaname.com/galleryview referencing the problems people have had trying to get Gallerview 2.0 up and working and I really appreciated your example.
A quick improvement though: I noticed in the javascript for Galleryview (jquery.galleryview-1.1.js) there is a variable named:
var frame_margin_top = 10;Unfortunately, when modifying this variable, I noticed that it’s behavior seemed to indicate that the variable should be named something closer to
frame_margin_top_and_bottomor something similar (i.e., frame_margin_top controls the margins for both the top and the bottom of the filmstrip.)This is due to an error in the code of jquery.galleryview-1.1.js near line 436. In the section commented as
/*Determine dimensions of various elements*/there is a variable namedgallery_height. The first instance of the variableframe_margin_topthat appears in the series of summations that are set equal to this variable should actually beframe_margin. The “_top” part needs to be deleted.Just thought I’d submit a bug fix to the other person who seems to be actively posting/fixing stuff for this since the original author hasn’t supplied a download location on the jquery plugin webpage. He’s only supplied changelogs. I still don’t know where to download Galleryview 2.0 from here: http://plugins.jquery.com/project/galleryview
Hi Andrew, I saw your post on http://spaceforaname.com/galleryview referencing the problems people have had trying to get Gallerview 2.0 up and working and I really appreciated your example.
A quick improvement though: I noticed in the javascript for Galleryview (jquery.galleryview-1.1.js) there is a variable named:
var frame_margin_top = 10;Unfortunately, when modifying this variable, I noticed that it’s behavior seemed to indicate that the variable should be named something closer to
frame_margin_top_and_bottomor something similar (i.e., frame_margin_top controls the margins for both the top and the bottom of the filmstrip.)This is due to an error in the code of jquery.galleryview-1.1.js near line 436. In the section commented as
/*Determine dimensions of various elements*/there is a variable namedgallery_height. The first instance of the variableframe_margin_topthat appears in the series of summations that are set equal to this variable should actually beframe_margin. The “_top” part needs to be deleted.Just thought I’d submit a bug fix to the other person who seems to be actively posting/fixing stuff for this since the original author hasn’t supplied a download location on the jquery plugin webpage. He’s only supplied changelogs. I still don’t know where to download Galleryview 2.0 from here: http://plugins.jquery.com/project/galleryview
You know what John Doe said? “I still don’t know where to download Galleryview 2.0 from here: http://plugins.jquery.com/project/galleryview”
Me neither – darn it!
Also, there’s a Tweet from @jackwanders here http://twitter.com/jackwanders/status/10909948556 suggesting a GalleryView 3.0 was (Mar 22, 2010) on its way… anyone knows more about this intriguing plug-in? It sure looks like what I would need for my current project
You know what John Doe said? “I still don’t know where to download Galleryview 2.0 from here: http://plugins.jquery.com/project/galleryview”
Me neither – darn it!
Also, there’s a Tweet from @jackwanders here http://twitter.com/jackwanders/status/10909948556 suggesting a GalleryView 3.0 was (Mar 22, 2010) on its way… anyone knows more about this intriguing plug-in? It sure looks like what I would need for my current project
Hey everyone,
I’ve been reading through all of the comments about the GalleryView plugin and read that the flicker that appears prior to the load of GalleryView was supposed to be fixed in version 2.0.
I have version 2.1.1 but I’m still seeing this flicker. Does anyone know if there is anything special I have to do, settings wise or elsewhere, to get rid of the flicker.
If you’re not sure what I’m talking about, basically our news items are set up as a set of LI tags with and overlay (panel-overlay) contained within each LI. When the page first loads you basically see everything in a list, one below the other before GalleryView is loaded. You can see what I’m talking about here http://www.spikemag.com.au/.
Any help would be hugely appreciated.
Josh
Hey everyone,
I’ve been reading through all of the comments about the GalleryView plugin and read that the flicker that appears prior to the load of GalleryView was supposed to be fixed in version 2.0.
I have version 2.1.1 but I’m still seeing this flicker. Does anyone know if there is anything special I have to do, settings wise or elsewhere, to get rid of the flicker.
If you’re not sure what I’m talking about, basically our news items are set up as a set of LI tags with and overlay (panel-overlay) contained within each LI. When the page first loads you basically see everything in a list, one below the other before GalleryView is loaded. You can see what I’m talking about here http://www.spikemag.com.au/.
Any help would be hugely appreciated.
Josh
Hi,
@ Francesco – I also couldn’t figure out how to download it from the plugins link so I ended up googling it to see where I could get it.
I’m running 2.1.1 and its really nice. The only thing I haven’t figured out that would be helpful is how to run vertical filmstrips. I see there is a ‘filmstrip_orientation’ option, but I can’t quite figure out how to set that to ‘vertical’. Any suggestions?
Thanks!
Hi,
@ Francesco – I also couldn’t figure out how to download it from the plugins link so I ended up googling it to see where I could get it.
I’m running 2.1.1 and its really nice. The only thing I haven’t figured out that would be helpful is how to run vertical filmstrips. I see there is a ‘filmstrip_orientation’ option, but I can’t quite figure out how to set that to ‘vertical’. Any suggestions?
Thanks!
Andrew
Many thanks for the example – after hours spent banging my head on the keyboard at the homepage of galleryview, I finally managed to get it working based on your code. Thank You.
Andrew
Many thanks for the example – after hours spent banging my head on the keyboard at the homepage of galleryview, I finally managed to get it working based on your code. Thank You.
I can’t find out where to download it on
http://plugins.jquery.com/project/galleryview
I want to use this plugin but without the ability to download it, can’t
chris
I can’t find out where to download it on
http://plugins.jquery.com/project/galleryview
I want to use this plugin but without the ability to download it, can’t
chris
In your example change the follow:
$(document).ready(function(){
$(‘#gallery’).galleryView({
panel_width: 800,
panel_height: 300,
transition_speed: 350,
easing: ‘easeInOutQuad’,
transition_interval: 0,
show_filmstrip: false
});
});
and in the body:
the body center cause bottom next don´t work
In your example change the follow:
$(document).ready(function(){
$(‘#gallery’).galleryView({
panel_width: 800,
panel_height: 300,
transition_speed: 350,
easing: ‘easeInOutQuad’,
transition_interval: 0,
show_filmstrip: false
});
});
and in the body:
the body center cause bottom next don´t work
Whoops… i found an issue (which I just reported at the GalleryView site) which shows up here as well. Look at the page in IE 7 of IE 8 and you’ll notice the thumbnails in the filmstrip are breaking out of the borders.
I noticed that IE is resizing the images differently and comes up with other sizes than Chrome or Firefox do. Anyone got a fix for that? I tried to fix it by CSSing the .img_wrap img with a height and width, but then the main image becomes square as well… 8-/
Whoops… i found an issue (which I just reported at the GalleryView site) which shows up here as well. Look at the page in IE 7 of IE 8 and you’ll notice the thumbnails in the filmstrip are breaking out of the borders.
I noticed that IE is resizing the images differently and comes up with other sizes than Chrome or Firefox do. Anyone got a fix for that? I tried to fix it by CSSing the .img_wrap img with a height and width, but then the main image becomes square as well… 8-/
Pingback: How to implement GalleryView javascript multiple times - Hot Scripts Forums
Pingback: How to implement GalleryView javascript multiple times - Hot Scripts Forums
Is there anyone out there…I desperately need help!
I’ve been wrestling with using “Gallery View” for few days now.
My picture size are 960X400 and thumbnail size are 120×50.
If there is anyone who can help. Please email me at triad_jgl@mac.com
I can send you the the file (including html, javascripts and pictures) for you to look at.
Thanks in advance.
Is there anyone out there…I desperately need help!
I’ve been wrestling with using “Gallery View” for few days now.
My picture size are 960X400 and thumbnail size are 120×50.
If there is anyone who can help. Please email me at triad_jgl@mac.com
I can send you the the file (including html, javascripts and pictures) for you to look at.
Thanks in advance.
Some people couldn’t find the download location.
On plugins.jquery.com/project/galleryview you have to look under View all releases.
Here is a direct link for the 2.1.1 release.
Some people couldn’t find the download location.
On plugins.jquery.com/project/galleryview you have to look under View all releases.
Here is a direct link for the 2.1.1 release.
I’m using GalleryView, but is giving me the following error: Object does not support this property or method on line 519 of jquery.galleryview-1.1.js I found is a problem in showNextItem … Can anyone give me a solution??
I’m using GalleryView, but is giving me the following error: Object does not support this property or method on line 519 of jquery.galleryview-1.1.js I found is a problem in showNextItem … Can anyone give me a solution??
Is there a way to use separate thumbnails with version 2 instead of resizing the main image?
thanks
Is there a way to use separate thumbnails with version 2 instead of resizing the main image?
thanks
The only issue i cannot resolve is once the light theme is implemented, or whatever theme you are using or have created, i cannot change the pointer image. This is the only image that doesnt change. I was able to hard code it using css but the original black with the glossy edge is still visible. Any ideas?
The only issue i cannot resolve is once the light theme is implemented, or whatever theme you are using or have created, i cannot change the pointer image. This is the only image that doesnt change. I was able to hard code it using css but the original black with the glossy edge is still visible. Any ideas?