GalleryView: A jQuery Content Gallery Plugin
GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
July 6, 2009 – I hope everyone had a good July 4th weekend, well…those living stateside anyway. Everyone else, I hope your weekend was equally as summer-ific. Oh, and you southern hemisphere folks, welcome to winter. That cover everyone? Cool. Anyway, just wanted to let everyone know that I should finally have a bit of time in the next few weeks to get this website back on track and start knocking out features for GalleryView 3.0. There were a lot of comments while I was away, so I need to go through them, and I’ll collect any good ideas I see. If you have any other suggestions for features or bug fixes, please let me know. Thanks!
I’m sorry guys, but something really weird is going on. It looks like I’ve lost about two weeks worth of content. Pages, posts, webstats, etc. It’s just…gone. I don’t have time to investigate right now, but I’ll look into it when I get a chance. In the meantime, this entire page is now out of date, as it talks about GalleryView 1.1. For the lastest version, 2.0, please check out http://plugins.jquery.com/project/galleryview.
Anatomy of a Gallery
Mouseover the links below to view the various elements that make up GalleryView.
Panel | Overlay | Filmstrip | Frame | Caption
 |
|
All your content lives here. Use an image for photo galleries, HTML for text content. Use iframes or AJAX to view content from other pages or websites. An optional element that lets you give a little more information about the content in each panel. Overlays can be placed at the top or bottom of your panels Thumbnails for all your panels are displayed here. Extra frames are displayed as the gallery moves from panel to panel. The filmstrip can reside at the top or bottom of the gallery The filmstrip consists of frames, each containing a small image representing the corresponding panel. Optional element to give users a title for each frame. If enabled, captions are populated from each images ‘title’ attribute. |
Usage
Using GalleryView requires a simple function call and four parameters:
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
All other parameters are strictly optional, but allow for a great deal of customization in the look and functionality of your gallery. View all options in the table at the bottom of the page.
GalleryView will expect some combination of three element types:
- A
<div>with the id you specify in your call to GalleryView<div id="photos" class="galleryview"> ... </div>
- A series of panel
<div>s, with optional overlays... <div class="panel"> <img src="img/gallery/02.jpg" /> <div class="panel-overlay"> <h2>Eden</h2> <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p> </div> </div> ...
- An unordered list of images (with optional title attributes if
show_captionsis set totrue)<ul class="filmstrip"> <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li> <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li> <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li> <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li> <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li> <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li> <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li> <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li> </ul>
View the source of the following demonstrations for some example source code.
Themes
Two sets of navigation graphics are supplied to support both light and dark colored galleries. Each theme contains the following six images in PNG format.
GalleryView allows for users to create their own themes, should they wish. Simply create new graphics with the appropriate filenames and place them in a folder within jquery-galleryview-VERSION/themes. Then set the nav_theme option to the name of this folder.
As of version 1.0, custom navigation graphics should have the same dimensions as the supplied graphics:
- pointer.png and pointer-down.png – 19 x 10
- next.png – 22 x 22
- prev.png – 22 x 22
- panel-nav-next.png and panel-nav-prev.png – 42 x 42
This restriction will likely be lifted in an upcoming release.
View a Demonstration
- Default Implementation
- Small Filmstrip, alternate navigation theme
- HTML panel content, no automatic transitions
- Links in filmstrip frames
- Custom navigation theme, filmstrip & captions above panel
- Customized gallery background
- Filmstrip only – Carousel style gallery
- Panels Only – Lightbox style gallery
Download / Instructions
GalleryView requires the jQuery Timers plugin to facilitate timing of animation events. I have included a copy of jquery.timers-1.1.2.js with the plugin files.
I also recommend the jQuery Easing plugin to create a smoother filmstrip animation.
GalleryView contains a development script and a packed production script. Also included is a themes folder which contains the two default navigation graphic sets. Download the latest release from the jQuery plugin project page
- GalleryView @ plugins.jquery.com – Current Version: 1.1
GalleryView is available for use in all personal and commercial projects under the MIT license (view here). If you are using GalleryView 1.1 or below, please download a copy of this license and include it with the plugin files. The license will be included with the next version of the plugin.
To install GalleryView:
- Install jQuery to your website (version 1.2.1 or later)
- Download and unzip GalleryView package to your website’s javascript directory
- ‘themes’ folder and jquery.galleryview.js must remain in the same directory
Known Issues
- Filmstrip pointer border flickers and/or disappears while transitioning between frames(Safari 4 Beta – Windows)
- Only occurs if pointer animates instead of filmstrip
- Gallery animation may start before images load on slower servers. This will cause some hiccups until all images are loaded
- I’ll look into pre-loading images in future version
- Panel overlays do not correctly fade in/out during panel transitions (IE7)
- Transparent PNG images used in panel navigation do not properly fade in/out (IE7)
- jQuery plugin pngFix might remedy the problem
Configuration Options & Defaults
| Option | Type | Default | Description |
|---|---|---|---|
| panel_width | integer (pixels) | 400 | Width of panel |
| panel_height | integer (pixels) | 300 | Height of panel |
| frame_width | integer (pixels) | 80 | Width of filmstrip frame |
| frame_height | integer (pixels) | 80 | Height of filmstrip frame |
| overlay_height | integer (pixels) | 70 | Height of panel overlay |
| overlay_font_size | any font size value (px,em,pt,%) | ‘1em’ | Default font size of panel overlay |
| overlay_position | ‘top’ | ‘bottom’ | ‘bottom’ | Position of overlay within panel |
| filmstrip_position | ‘top’ | ‘bottom’ | ‘bottom’ | Position of filmstrip within gallery |
| transition_speed | jQuery time value (200,’slow’,etc) | 400 | Duration of transition animation |
| transition_interval | jQuery time value (200,’slow’,etc) | 6000 | Length of time between transitions (0 = no automatic transitions) |
| overlay_opacity | float 0.0 – 1.0 | 0.6 | Opacity of panel overlay background |
| overlay_color | jQuery color value (rgb,hex,name) | ‘black’ | Color of panel overlay background |
| background_color | jQuery color value (rgb,hex,name) | ‘black’ | Color of frame background and filmstrip background |
| overlay_text_color | jQuery color value (rgb,hex,name) | ‘white’ | Color of text in panel overlay |
| caption_text_color | jQuery color value (rgb,hex,name) | ‘white’ | Color of text in filmstrip captions |
| border | css value (e.g. ‘3px dotted #343434′) | ‘1px solid black’ | Size, style and color of gallery border |
| nav_theme | (’light’ | ‘dark’) | ‘light’ | Color of navigation buttons and frame pointer |
| easing | jQuery easing value (’linear’,’swing’,etc) | ’swing’ | Controls animation of filmstrip and pointer |
| show_captions | boolean | false | Determines whether or not frame captions are displayed |
| fade_panels | boolean | true | Determines whether panels fade during transitions or switch instantly. |
| pause_on_hover | boolean | false | If true, animations will pause when the mouse hovers over the panel (requires 500ms hover to pause) |
spaceforaname
com
[...] GalleryView [...]
Hello,
I’m a french guy, so i apologize for my bad english.
I really appreciate your work cause i was looking for a simple crossfade diaporama in jQuery cause i was used to a Scriptaculous crossfade one wich makes conflicts with jQuery library.
But i have a question :
I want to use your script to display diaporama in background of my site’s header. I found a css solution for the Scriptaculous crossfade diaporama, but i don’t find a solution with yours (as you could see on my site in developpement at the url http://www.lappeldairs.org/tinatur).
Do you know a solution to put your great galleryview on background of my header?
Thanks for your plugin and thanks a lot for your help!
I took a brief look at your page, and it looks like you want to have a crossfade gallery behind your circular logo. My suggestion would be to use absolute positioning to place a transparent GIF or PNG of your logo on top of the gallery. This might be easy or difficult, depending on you currently have your header designed.
This implementation, however, will still leave you with navigation buttons when someone mouses over the header. I’ll look into adding an option in the next version of GalleryView to disable navigation for panel-only galleries, resulting in a simple crossfade image rotator.
Jack, have you noticed the image slideshow on the homepage of http://www.ign.com ? Is that yours, it looks a lot like GalleryView.
IGN uses their own code, but I did take some inspiration from it. Namely, the border around the current filmstrip frame.
Ah, the filmstrip frame was where I made the connection. Also, do you have any ideas on how to in the current version, or plans for the next version, to make background’s (gradients maybe using CSS repeat-x) for the filmstrip area?
With version 1.1, you would need to define
background_coloras ‘transparent’, and then use CSS to define a background image for your gallery div. If you position the background image correctly, it will display behind your transparent filmstrip.Is there a way to make the overlay disappear on hover?
you could always try a bit of CSS, which would look like
.panel:hover .panel-overlay, .panel:hover .overlay { display: none; }. There are two separate elements to the overlay, so you’d need two rules. This won’t fade it out or anything, but it should make the overlay disappear when you hover over the panel. If you want it to disappear when you hover anywhere on the gallery, replace.panel:hoverwith#gallery:hover, or whatever ID you assigned to your gallery.I’ll look into adding this as an option with a future version, perhaps “
hide_overlay_on_hover” or something to that effect.In response to your answer about my background image on filmstrip question, should I set the background CSS attributes on the “photos” div, or on the actual ul id=”filmstrip” ?
It would have to be applied to the ‘photos’
<div>. The ‘filmstrip’<ul>only comprises the space between the two navigation buttons. The easiest solution would be to set your CSS rule as#photos { background: url(path/to/image.gif) bottom left repeat-x; }, assuming your background is meant to tile across the gallery.Hello Jack,
i am looking forward to use this Gallerryview in my application, but i cant understand how to include this nto my App.
Can you please suggest me how could i use this.
I even read the above instructions but i fail to understand.
Please help me in this regard.
thank you
Hi Jack,
Is there a way to apply two div (such as: #photos, #wallpage) on the same web page?
Hi,
and I apologize for my bad english…
I’m also french
In function buildPanels you add overlay divs if there are panel captions : why add this for all ?
You can simply add the overlays on element which have panel-overlay.
Something like that :
//If there are panel captions, add overlay divs
if($(’.panel-overlay’).length>0){
$(’.panel-overlay’).each(function (){
$(this).parent().append(”);
})
}
No ?
Apologize,
I submit my post quickly but it’s not finish…
I wish thank you for the gallery, it’s very nice and usefull !
Nice job !
Currently, GalleryView only supports a single gallery per page. I’m currently working on this for the next version, so keep an eye out. Thanks.
You make a good point. I had been assuming that someone would either have panel captions on all captions or none. I’ll add it to my ‘to-do’ list for the next version. Thanks for the comment.
Hey Jack sorry to bother you with the stupidest question about GalleryView but I just can’t align the text to th eleft and change the font style no matter what i try…
Cheers.. and once again thanks for that wonderful application.
S.
[...] A jQuery Content Gallery Plugin It’s free !!! You must check out this plugin website : http://spaceforaname.com/galleryview Posted in Ajax. Tags: Ajax, Gallery, [...]
Soulayman, I’m not Jack but I’ve found this bit of CSS to work great. Just throw it in and it works.
.panel-overlay h2,
.panel-overlay p{
margin: .2em 0;
text-align: left;
}
.galleryview {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
Hey Soulayman. Right now all the styling is done through javascript, so some of it can be hard to override. This is changing with the next version. I’ve already separated out a lot of the styling to an external stylesheet, so it should be a lot easier to make changes to the presentation of the gallery with the next version.
Hi Josh & Jack thanks for your help
@Josh : This is what i tried in the 1st place but in my case the javascript styling seems to be the boss no matter what..unfortunatly I’m not a Jvs guy at the moment…
@Jack : Can’t wait to download the next version.. do you have any clue when it will be relased ?
Hey Jack, like the plugin. Was just wondering when the next version is going to be released?
Soulayman: It worked for me, and CSS is CSS, Javascript is Javascript. So it should override properly if your div’s are classed with panel-overlay and/or galleryview (where appropriate).
I am displaying photographs of art works where the dimensions of images and their thumbnails is different to maintain the aspect ratio of the original work.
The non-image part of the thumbnail frame is black which is ok. However, the “unused” portion of the main image is white which doesn’t look good.
I can’t seem to find a solution. Any thoughts?
Thanks,
Chris
Hi Chris. Try one of two CSS rules:
.panel { background: black !important; }or
#gallery { background: black !important; }(replace ‘gallery’ with the ID of your gallery container)Either one should back the space behind your full-size images black. Alternatively, you can wait for the next version of GalleryView, which will accomdate panel and frame images of differing dimensions.
Galleryview looks brilliant but I need to have a vertical filmstrip and the ability to ‘popup’ the large images, closing them when cursor moves off the image. Is it easily customisable to do this?
New to Jquery – build mostly database driven Workflow sites with PHP & a small amount fo Javascript & Jquery when I cannot avoid it(!) Site above designed with Xara Web Designer – reall quick & easy for ‘pretty but simple’ sites.
The vertical filmstrip is something I attempted to implement for version 1.1, but was unable to do so. I may take another crack at it, but unfortunately I can’t promise anything right now. As for your ‘popup’ request, it sounds like you want the panel to only display when the user moves their mouse cursor over a frame in the filmstrip. is this correct?
Hello,
I’m using this script on a zencart store… Mixing it with the Tabswitch jquery plugin : http://www.hieu.co.uk/blog/index.php/tabswitch/
It looks really good, but I’m missing out on the theme elements. I don’t quite understand how to define where “themes” folder is located. I would like to put that folder in a specific place on my server and then link to that place in the correct place… How do I define where themes folder is located ?
Thanks in advance.
[...] GalleryView – jQuery ?????? ??? ??????????? ???????? [...]
Hello Jack,
First of all, my congrats for the gallery. It’s helping me a lot! I still have a little problem in installing the gallery which is the eternal IE 6.0 issue (PNG_fix). I still haven’t figured it out how to fix the png problem, i do everything which has to be done and nothing comes out. I still get little white squares.
I’m a portuguese student and forgive my english. I hope you can help me a little more Jack.
I give my congratulations one more time for this project.
Josh you were so right !!!
I was linking to an old stylesheet which explains why the code was not working !
Thanks a lot, everything is fine for me now !
Very impressive! Has anyone tried using this in a jQuery Thickbox?
Thank you … this tutorial has me very helped.
>Allow for multiple galleries on one page
Yes, man! I’m looking forward for it
AA: I’ve tried it with Thinkbox using iframe and so far i have not had any problems
Hi,
First, thanx for this beautifull script and support.
I’m thinking of using GalleryWiew for a website I’m building for a friend.
But… he would like to have his filmstrip vertical, on the right of the gallery !
Is this possible with your script, or do I have to find another one ?
Hi Gaël. You’re in luck, as I just recently got vertical filmstrips working in version 2.0 of GalleryView. It’s still under development as I polish off a few things and clean up the code, but I would expect it to be released in a few days.
It’s clearly a great script, works perfectly, but i think there’s too much generated CSS.
Have to change the script to change the design sometimes.
That’s not so bad but i’m thinking about some designers who don’t have the knowledge of JS, they just can be lost.
Hi Jack, I’ve sent you a mail : what is checked on your to-do list for V2 is enough for me…
…would you let me beta-test it at this point ?
I’ll update the scrit as soon as you publish V2…
Jack, using GalleryView on a different project of mine now … any way to space the items in the filmstrip more so that more words can fit on the filmstrip (e.g. the caption being wider than the thumbnail?) See on http://cyber-fm.com how the second one should say “Reformationists” and the third should say “Observing Paul.”
Also, notice when the page first loads that it seems jquery is slow to load GalleryView — everything appears as a column of images and bulleted lists at first, and then rakes it self together… any ideas? Thanks!
This plugin works very well. Thanks! Is there a way to force the position of the selector on startup? Basically I want to use as tip of month selector with correct month selected on startup.
Hi Daniel. That’s a very interesting application, not one I had thought of. In any case, setting a starting frame on version 1.1 is a bit of a chore (you’ll have to modify the plugin code), but if you know your way around jQuery, it shouldn’t be too tough. However, with the re-writes I’ve made for 2.0, it should be simple enough for me to add a “start_frame” option, which will make it simple to start your gallery on any frame. Thanks for the feedback.
Hey Josh. I’ve already added a “frame_margin” option to version 2.0 which will let you space frames as far apart as you want. I haven’t considered widening the captions as a result, but I can take a crack at that as well. As for the flash of an unstyled list, it’s a result of galleryView not being fast enough in hiding the gallery before it starts constructing it. This is a bug fix in 2.0, but in the near term, you can try playing around with hiding the gallery container via CSS and then displaying it again after calling the GalleryView function.
This plugin is awesome. I’m trying to have make it so that a button could change the content of the gallery currently showing in a frame… I thought this could be solved by having more than one gallery on the same page, but since you postponed this feature, any advice?
Thanks very good galery
Jack, there’s a problem with the Galleryview 2.0 on cyber-fm dot com, it doesn’t appear to be consolidating properly still. You still see the bulleted lists briefly and then it pulls itself together. Any fix for this? Thanks.
[...] brushes from here to add kind of art-deco look to the web page. Also I used this jQuery galleryview slideshow which is amazing. I love open [...]
Hi, thank you for this plugin!
How do I set up a different theme_path?
My js and css files are somewhere in my app and I have to customize my theme_path. How do I do that?
Nevermind, it was my stupid fault, I figured JS auto-included the CSS. Rather, you have to put in the tag for the galleryview.css file, and then everything worked perfectly.
Can’t find a demo for that script — can you please post a link to a demo-gallery?
Hi,
Thank you for the great work on the plugin. I am trying to figure out how to call the showItem() function from a link outside of the gallery. So I could have a list of hyperlinks and when clicked it would select the proper index from the filmstrip. Any ideas on how to call this function or to make it public?
Thanks,
Brendan
How can I make it pause by default.. I want to show the next images only when the user click on the prev/next button or image thumbnail..
man, just put some html code examples for upgrading to 2.0!
Great job but I’m wondering… Is there a way to have a sort of navigation bar to jump to different sections of the gallery? For example in a photography portfolio including some portrait photos, some landscapes and some architecture, I would like to have three links pointing to the first image of every section above. Thank you.
Hi Jack,
Is possible in a easy way, change the filmstrip images for other when te mouse over each image.
When de filmstrip is complete in the screen, this option works with a simple javascript like this document.images['strip01'].src=”img/gallery/strip_01_b.jpg”;, but when the filmstrip have more images doesn’t work.
Thanks and congratulatios for your great job!!
Hey, first of all, great plugin. I’ve been searching for a plugin for my friends site for ages and this is exactly what i wanted. However, I am having a problem with IE 6…the gallery just doesn’t show, and I have had to change the css to always display the images just incase the JS doesn’t load. This is my first site so if you could give me an insight into why this isn’t working I would be very appreciative.
Thanks,
Simon
I’m having a problem using galleryview 1.1.
The problem is when i’m using it in wordpress.
you can see it at:
http://www.amebaproducciones.com/img1.JPG
I was applying the galleryview example into wordpress but me and a friend are having the same result:
1. It’s displaying only 3 images in the filmstrip when actually i have four.
2. The little pointer frame is not framed with the filmstrip.
3. Also the white line across the up and left margin.
I really don’t know what to do, any help will be very appreciated.
The example is running perfectly at a plain html web page, the problem is with wordpress.
Thank you
Hi, great plugin. Many thanks!
Only one question… I have installed ver 1.1 and it works fine, but I have problems installing ver 2.0. It loads the same images in the panel and in the filmstrip. I saw the new features in the CHANGELOG file, but there is not any explanation about how to install it and the changes in the markup from ver 1.1 to 2.0.
I’ve found the html code snippet in the comment of the galleryview.css, but the problem still exists, cause I don’t know what to change. Maybe I am missing something important…
Do you have any working example of GaleryView 2.0 online? Or can you please help me with some advice.
A working example will be great help…
Thanks in advance and good luck everybody!
Fortunately, I’ve found cached versions of your lost ver 2.0 demo pages in Google’s search index looking for site:spaceforaname.com galleryview.
That was enough for me to figure it how it works, so now it works ok for me.
Thanks again for your time and the plugin!
Hope you will get all your pages up soon…
Greetings from Bulgaria!
Hey, this is awesome, thank you very much. I tried to use the Demo HTML code to implement but realized I had downloaded 2.0 and it was referencing 1.1. I would much rather use 2.0 to separate out some of the CSS so I can style it easier. However, is there a demo of 2.0 somewhere or a sample of implementation code that I could look at?
Thanks again, awesome stuff.
Is it me, or on the following example: http://spaceforaname.com/panels.html, using Firefox v3.0.10 on Win XP the overlay font weight changes from normal to bold once the transition effect is complete? (haven’t tested on Firefox for MAC yet)
on IE7, it does not do this, albeit, I see the fade in/out panel overlay issues as described under ‘known issues’.(looking forward to seeing these get fixed)
I think I ran into something like this before, but never figured out how to get the text to show up bold from the beginning instead of noticeably becoming bolder after the effect completes..
any thoughts on how to fix this? or exactly what may be causing it?
Thanks and good work.
Thank you for Gallery View. I appreciate the effort you’ve put into this module. I selected Gallery View about 10 days ago to implement into a new website (http://stainedglassmedallions.com. I even read the documentation on 2.0. I see now that you’ve lost some information. I am under a deadline to have the site done by 05/30/2009. I was wondering when you would get the website updated so that I may implement features in 2.0. If you are unable to do that, do you have the documentation in any other form that you can send me? Thanks again for your efforts.
Also, if all the features in the documentation on the web will work (except for any new features) can I use that? Thanks.
[...] GalleryView 2.0: A jQuery Content Gallery Plugin [...]
Hi,
I live in a country that is somehow internet challenged
sometimes when i choose a gallery, the page is open wide down… there is a scroll in the page, as if the are loading but u can’t see the images … then the gallery works
but there is a time delay
any idea or workaround for this :$
appreciate the help and thanks for the great work
( i was lucky to get the latest version of the gallery.. thanks )
This is a great gallery, thanks, all your stuff is great. I noticed on ign they use it to and they are able to put the bottom part of the image behind the filmstrip, Is this a 2.0 thing, does anybody have any suggestions?
I wish to implement this on my website but do not know where to start.
Do you have an example HTML page? I was hoping there would be one to hack in the ZIP file but there wasn’t…
[...] GalleryView(????????????)?http://spaceforaname.com/galleryview [...]
Does wrongly English.
Truth thanks. Is grateful.
I am using version 1.1 and I don’t understand the syntax for setting the path to the themes folders..dark,light, and custom .. in the nav_theme option. I’m a complete JQuery newbie and I’m sure this is basic..but I’m missing something.
is it in the format ‘javascript/galleryview/themes/dark’ .. assuming my dark folder is in themes under galleryview and javascript folders?
I have evrything else working .. but not the pointer pngs.
Thanks..great work on this!
Jim
Hi Jack. This GalleryView looks amazing, but i would’nt on Wordpress?
Is it possible to place the filmstrip over the panel? Also, is it possible to keep the filmstrip and the panel in different divs?
I’m trying to use this library in ver. 2.0 but if i use it at place of v1.1 i get an error in the Jquery script: error is in the rows “if ( set ) elem[ name ] = value;” because value is “NaNpx”.
Changing v2.0 with v1.1 of this library all works right.
Hi Jack
I really like the look of the gallery, it looks very slick and well implemented. However I can’t work out what HTML markup I need for v2.0 and I cant seem to find any examples anywhere.
Could you post an example (no explanation needed) as without it I can’t imagine many people are able to use it. It might be a good idea to include a simple example in the download package to give people a starting point, many other plugins do this and it can be very useful the first time you use it.
Thanks
Aram
Nice article, I got a lot of helps from it. Thanks
Greetings from Brasil! Great job! Beautiful gallery.
But I did note the ZIP I downloaded from jQuery’s plugins page (with version 2.0) do not contain any HTML example page.
I also noted that if I want to change the themes folder to a diferent location in my server it will mess up the gallery.
Maybe if you define the images (or this folder) path in a variable at the beginning of the javascript file it would be better.
Beforehand sorry for my English. Jask, I’m very glad that I meeting with GalleryView. Can I khow how made their HTML markup for GalleryView 2.
Well, it’s me again (Luis from Brasil). Now I noticed you’ve already defined a variable (img_path) to the images path in the javascript.
But still it didn’t work. I’ve changed the themes folder to another location, specified it in the variable and nothing happened. Right now I have a gallery without control buttons.
I would appreciate if you clarify this. Tks.
Hi Jack
Any chance of providing a GalleryView 2 example
Difficult without that to proceed. Shame as you have put in a lot of effort to date – kind of a priority to us mere mortals
Cheers
Any chance of some basic 2.0 examples being placed back on the site?
[...] GalleryView [...]
Any one get this to work with an xml or rss feed?
I love this plugin, but too bad the thumbnails aren’t created by jquery. They are static thumbnail size pictures =(
[...] Ajax GalleryView [...]
[...] GalleryView: A jQuery Content Gallery Plugin posted under jQuery, javascript Post correlati: CSS: Tutorial Menu orizzontale con icone [...]
Hello Jack,
I am attempting to use the HTML panel content, no automatic transitions implementation of Gallery View. I’ve downloaded the latest version of GalleryView, 2.0.
I referenced your example page to see wha thte html structure was like and how oyu implemented this plugin. I’ve pretty much setup my html page the same way but when I view it in a browser it is invisible.
Are there any adjustments that need to be made for this implementation to work with the 2.0 version.
I’m at a loss.
i cannot create gallery view 2.0. Can you send me latest version of gallery demo plz. I want to use “GalleryView: A jQuery Content Gallery Plugin”. If it is possible, plz send me it on my e-mail.
It is very beautiful content gallery.
Thanks
I don’t know if I’m just reading through the files wrong but I believe the CSS supplied with the Galleryview 2.0 on the jQuery plugin page is the incorrect version?
by far the slickest gallery i’ve found. thanks..
really nice gallery.. thanks..
hey,
I m using gallaryview plugin version 2.0
I m facing problem while using this..all of my content gets repeated.
Please suggest me any example of using the jquery gallary view 2.0 plugin.
I think there are changes while using 2.0.
Thanks
Is there anyway to get them to display like the FLuid Gallries?
http://www.evrium.com/store/fg2p_details.php
Would make it perfect as i really dont want flash on my site
Jack. Working on the lightbox style display for a company Web site and I keep having problems with the navigation images not loading properly. In my browswers, both Chrome & IE, they display as the red X as if the images are missing.
Where in the script are these images even told to load from. Any help would be appreciated.
Has anyone figured out the IE7 panel overlay fade in/out issue? Is there a way to make the images continue to fade in/out but have the overlays not?
Did anyone get an answer on where to out the theme folder and/or how to set a custom path?
I can’t seem to get the next and prev pngs and the indicator png to show .. using 1.1
Thanks!
Jim
Hi there,
I am implementing GalleryView 1.1 inside of a tab using jQuery UI’s tabs. Everything fits nicely but when the page first loads, the thumbnail pointer ends up at the top of the div. I have to refresh the page before it comes down to the proper spot.
Anyone else run into this type of problem/knows how to fix it?
Thanks
Jack,
Just curious if you could post the “updated html structure” that is mentioned in the CHANGELOG.txt of 2.0. I’m really loving the idea of the gallery – but can’t get it to work and would love to use it.
Thanks,
Aaron
Hi, please help me!!!!
I’m using IE7 but i have a problem, two small boxs appears above the arrows, please please somebody can send me the zip please-!!!!
I’m using this
Panels Only – Lightbox style gallery
when I proved it on localhost appears the problem
Thanks for this great slide show.
Is there a demo available for version 2?
I’m hoping to get it working so I can make the most of the new feature to accommodate different thumbnail sizes.
Even something very basic would be a help.
TIA
kamm…
I have an error that tells me that this function does not exist
Error: $ ( “# photos’). GalleryView is not a function
Source File: http://localhost/Jquery/example/gallery-light.html
Line: 16
and if I set it just like this in the example I want a prompt response because I love this gallery and would like to use
Hey Jack, I’m looking to use your plugin for my photography website, as it provides the image gallery/scroller most close to what I’ve envisioned. However, I’m using your 2.0 and its a big difficult to work with as there is no example of what this new HTML markup looks like. Could you provide some examples as you’ve done with 1.1?
As well it doesn’t look like the filmstrip size variable actually works.
In 2.0, is it possible to have separate thumb image sets? Sometimes its desirable to have the thumbs premade because the photographer may want to produce the thumbs with a specific focus.
thanks!
very nice!! I love this.
Have you noticed that the panels do not transition correctly in IE 8.0?
http://spaceforaname.com/panels.html
The initial panel looks great, but the text area on the second image is offset to the left. Any thoughts on how to fix this issue? My guess is that it requires some tweaking of the CSS???
Thanks!
For anyone struggling with implementing the 2.0 version, the markup is as follows (from trial and error plus some help from twitter.com/leepowell):
…Whatever…
Hope this helps whilst the 2.0 page is MIA.
Hmm… stripped all of the markup from my comment.
Hey, there are no docs/examples for v2.0. Could someone set up just a demo or two?
The is my best image gallery in jQuery.
I didn’t get any problems or even difficulties using it.
Thanks for the author.
Just bumping this. I could really use an HTML code example for 2.0
If I wanted to click on an image and have the pointer move to that position – instead of moving the image thumbnail to the first position – how would I go about doing that?
I notice if you only have 3 thumbnails then you click on a thumbnail and the pointer goes to that spot. If you have many thumbnails it goes on a rotating thing where the thumbnails just keep repeating. I’d prefer to have the left and right show a different selection of thumbnails (maybe setting the one selected as either the first or last item seen depending on which direction you click) and have it end rather than continuous.
Thanks – nice script
ooo Thank you, Beatifull, Te?ekkürler.
Hello Jack,
Do you have any idea about how to stop scrolling when it reaches to the last photo of the strip? Let’s say there are 14 pictures on the strip and after some clicks on arrow it will reach to the 14th picture, when it reaches there it must stop scrolling to right direction, it should not show first picture after 14th.
It is urgent, any idea is appreciated.
Thanks in advance.
How can i make the filmstrip either expand to the same width as the panel or custom position my thumbnails in a specific position, i have a 626px panel and 5 106px wide thumbnails, and it keeps adding the wrapper. Thanks in advance
Hi Jack, I have only one problem, or perhaps two, get this url with FF (http://spaceforaname.com/panels.html), IE7 does not provide you with the arrows appear to the sides. Down to the zip, not just the HTML document are the others. Please Jack, and take several days trying to solve it. Thank you very much
Hey, I cant get the panel overlay to work on 2.0 and I have no idea what is wrong. The overlay content is not even showing up as a catpion.
Looks like a lot of people are having trouble getting version 2.0 to work correctly.
I have put together a small example – hope it helps!
Andrew Appleton: Cool! Thanx!