javascript, jbgallery, jquery, plugins
jbgallery 2.0
29 March 2010 | CommentsDEMO SITE – (UPDATED 2010-12-20)
jbgallery is a UI widget webpage written in javascript on top of the jQuery library.
Its function is to show a single big image, multiple images, multiple galleries, slideshows, as a site’s background, in a “dialog” mode or as a common pop-up.
jbgallery has two basic menus: the first one has music player buttons while the other one links directly to single images.
I added a “complex” menu on the 2.0 version, which in inspired by the flickr slider-equipped slideshow that allows to scroll the thumbnail previews.
jbgallery provides a pubblic API to remote control the component, so it would be easier to bind also with a more complex menu.
Examples:
- Option “style”:
- Option “menu”:
- Single image background
- Single image centered
- Multi “fullscreen lightbox” gallery (2010-12-15 – update)
- Randomize first image (2010-12-15 – update)
- Randomize slideshow (2010-12-15 – update)
- “Fullscreen lightbox” vs Traditional popup (2010-12-15 – update)
- Custom labels
- No fade effect
- No fade effect (slider)
- Timers: interval
- Timers: autohide
- Callback for developers
- Api for designer/developers
- Clickable
- Picasa adapter (NEW)
- Picasa adapter (NEW) (album)
- Style test
Installation
Download and extract
jbgallery-2.0.zip (update: 2010-12-20)
Download single files :
- jbgallery-2.0.js : source | min
- jbgallery-2.0.css
- ajax-loader.gif
- sprite.png
- jquery-1.4.2.min.js
Extra files :
- jbpicasa.js : source – test adapter that you can use building an html structure, getting data from an external rss feed.
js and css (include in head tag)
<link href="jbgallery-2.0.css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="jquery.1.4.2.min.js"></script> <script type="text/javascript" src="jbgallery-2.0.js"></script>
HTML structure (minimal menu)
<div class="jbgallery"> <ul> <li><a href="1.jpg" >1</a></li> <li><a href="2.jpg" >2</a></li> <!-- etc --> </ul> </div>
HTML structure (thumbnails – menu with slider)
<div class="jbgallery"> <ul> <li><a href="big1.jpg"><img src="small1.jpg" alt="" /></a></li> <li><a href="big2.jpg"><img src="small2.jpg" alt="" /></a></li> <!-- etc --> </ul> </div>
HTML structure (caption)
<div class="jbgallery"> <ul> <li> <a href="big.jpg" title="Caption title"><img src="small.jpg" alt="" /></a> <div class="caption">Long long long text</div> </li> <!-- etc --> </ul> </div>
JS
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".jbgallery").jbgallery();
});
</script>
OPTIONS & DEFAULTS
Write options HERE :
jQuery(".jbgallery").jbgallery({HERE});
DEFAULTS
{
style : "centered",//centered, zoom, original
menu : 'slider', //false, numbers, simple, slider
shortcuts : [37,39],
slideshow : false,
fade : true,
popup : false,
caption : true, //NEW 2.0
autohide : false, //NEW 2.0
clickable : false, //NEW 2.0
current : 1, //NEW 2.0
randomize : 0, //NEW 2.0
webkit : (navigator.userAgent.toLowerCase().search(/webkit/) != -1),
ie6 : (/MSIE 6/i.test(navigator.userAgent)),
ie7 : (/MSIE 7/i.test(navigator.userAgent)),
labels : {
play : "play",
next : "next",
prev : "prev",
stop : "stop",
close: "close",
info : "info"
},
timers : {
fade : 400,
interval : 7000,
autohide : 7000
},
delays : {
mousemove : 200,
resize : 500,
mouseover : 800
},
close : function(){},
before : function(){},
after : function(ev){},
load : function(ev){},
ready : function(){}
}
OPTIONS
- style : string (‘zoom’/'centered’/'original’)
- slideshow : boolean (true/false)
- menu : string/boolean (‘slider’/'simple’/'numbers’/false)
- caption : boolean (show info button in menu – NEW)
- autohide: boolean (autohide interface – NEW)
- clickable: boolean (NEW)
- current: number (set the initial photo NEW)
- randomize : numeric (0/1/2 – NEW – 0 default | 1 randomize first image | 2 randomize slidshow/prev/next – thanks to Carlo Denaro – blackout: http://www.grayhats.org)
- fade : boolean (false/true)
- shortcuts : array (keycodes for trigger events left/right via keyboard)
- before: function (callback)
- load : function(ev) (callback – native image load event)
- after : function (callback)
- ready : function (callback – interface ready)
- popup : boolean (show close button)
- close : function(ev) (callback after click close button. i.e. window.close())
- labels: object – default:
{ play : "play", next : "next", prev : "prev", stop : "stop", close: "close", info : "info" } - timers: object – default:
{ fade : 400, //fadeIn-Out timer interval : 7000, //slideshow timer autohide : 7000 //autohide timer } - delays: object – default:
{ mousemove : 200, resize : 500, mouseover : 800 }
API (developers/designers)
- jQuery(“#jbgallery”).jbgallery(); // build object FIRST
- jQuery(“#jbgallery”).jbgallery(“go” , 2); // go to photo 2 if exist
- jQuery(“#jbgallery”).jbgallery(“left”); // prev photo
- jQuery(“#jbgallery”).jbgallery(“right”); // next photo
- jQuery(“#jbgallery”).jbgallery(“play”); // autoplay start
- jQuery(“#jbgallery”).jbgallery(“stop”); // autoplay stop
- jQuery(“#jbgallery”).jbgallery(“destroy”); // destroy object, events, expando
- jQuery(“#jbgallery”).jbgallery(“current”); // return number of current photo
CONTENTS/FURTHER ELEMENTS
To add to the image further contents or other kind of elements you can use the following div. Otherwise you can add other divs copying the styles below.
<div id="jbg-content">
<!-- PUT HERE CONTENT -->
<div id="docs">
<div class="wrapper">
</div>
</div>
<!-- /PUT HERE CONTENT -->
</div>
#docs{width:500px;right:200px;top:15%;position:absolute;z-index:1000;}
#docs .wrapper{padding:10px;margin:10px;background:#fff;}
BROWSERS TESTED
- Firefox 3.5 (winxp/linux)
- Safari 3.2, 4 (winxp)
- Chrome/Chromium (winxp/linux)
- Opera 9/10/11 (winxp/linux)
- Internet Explorer 6/7/8 (winxp)
DESIGN/GRAPHIC
This component is published with a minimalist graphic layout.
You are free to customize css and to ask me any change to add classes to the simple menus edited by me.
If you use API or design more complex menus, or if you write plugins populating html lists via ajax by flickr
or similar services, please share with me for the next version of this plugin.
CREDITS
This work is inspired by http://www.ringvemedia.com/ and Chicca
The slider is inspired by http://www.flickr.com/search/show/
Depends on jQuery (1.3.2/1.4.2) by John Resig.
Thanks to Carlo Denaro, Simone Parato, Aaron Hutten, Alain Bourgeoa, Steffen Wenzel, krko.
COMMENTS & CONTACTS
Post a comment on my blog.
http://maxb.net/blog/
LICENSE
Copyright (c) 2010 Massimiliano Balestrieri
Licensed GPL licenses:
http://www.gnu.org/licenses/gpl.html
119 Comments
Great work!!!
Hey Great work, is there a way we can add unique id’s to each gallery image so users can link directly to that image? Make sense?
Cheers. J
Hi – this is a gorgeous gallery – thank you so much for designing it.
Wondering – would it be possible to add some thumbnail navigation in a later release? (Or something…)
Keep up the amazing work!
Heath
a few style changes and Viola!
http://bitpurity.com/jbgallery/
It works in Opera….checkout the CSS
tested IE7, FF 3.X, Opera 9.63
@Heath
yes. with api
http://maxb.net/scripts/jbgallery/docs/api.html
thanks
@Aaron
Grazie Aaron! Thanks
Updated css, js, zip and post!
Perfect! Massimiliano, you’re so awesome – many thanks
Can’t wait to try this out…
Heath
Hi – Do you have an example with the history plugin, similar to your yCoadSlider? By the way nice job. Cheers. James
@james
no sorry
Great work on jbgallery! In one word, intuitive.
Buongiorno. Fantastic work. I’ve integrated with flickr via their API and made some cosmetic changes. This is really amazing.
One quick question — it doesn’t seem to work in firefox 3.6.3 or 3.5.7 [mac os x]. I’m not sure why — it flashes on the screen and then just loads the li. I’m guessing it has to do with how FF handles the JSON response, but i’m not sure. any thoughts?
@Ajay
In my ubuntu/FF 3.6.3 browser your flickr adapter works well
Can I link in the post your work, which is very cool btw?
http://snarglr.com/pictures.php
Or could I embed your demo and css in my docs/demo folder? I would prefer this option..
this is a great jquery slider!!
i got some question in developing this slider, can you help me to solve my problem?
I just copy the code(docs/menuslider.html) into
a php file, but it can’t works!
can you tell me why?
Lovin’ this plugin! Many thanks!
Question: there doesn’t seem to be an unobtrusive-javascript fallback. Should the first image load and remain static in case the user doesn’t have javascript on?
Question 2: how can i display my desired information in the label “info”?
@suen
Question 1: I don’t know. Can you publish a demo please?
Question 2: see here. http://maxb.net/scripts/jbgallery-2.0/docs/labels.html
@Chad
If you haven’t javascript on (spider ecc…), you see a simple
ul > li > link > text.
Or
ul > li > link > thumb
bye Max
thanks for reply my comment!^^
Moreover, i want to show more information about the photo,e.g.(link) instead of the title of the photo.
how can i achieve this? what i have to change in the .js file?
Hi Max,
Another question: how can I make the captions always appear? I can probably muddle around with the code until I figure it out, but if you read this in time you might save me hours of fumbling.
@suen
there was a little bug in my html.
look here http://maxb.net/scripts/jbgallery-2.0/docs/caption.html
@chad
a little workaround
look here http://maxb.net/scripts/jbgallery-2.0/docs/caption2.html
jQuery(document).ready(function(){ var _clicked = false; jQuery(".jbgallery").jbgallery({menu : "simple", fade : false, after : function(){ if (!_clicked) { jQuery(".jbg-info").click(); _clicked = true; } }}); });Hi Max, I actually figured out a way to modify the script to get it to work, but as can be expected, your method is so much simpler! Thank you!
One more question for you, and this might be a bug report:
I notice in my version of Chrome here at home and on another computer at work, that the first time the page loads, no problem: script works great. But if I reload the page I usually get nothing more than a white screen. This bug occurs even with your newest caption script:
http://maxb.net/scripts/jbgallery-2.0/docs/caption2.html
The only way I’ve seen to correct it is to reboot Chrome; hard refreshes seem to have no effect. My computer at home is using Chrome 4.1.249.1064.
Thanks again for all your hard work!
@Chad
Thanks Chad
I will watch as soon as possible
Hey Max,
It’s me again!
Sorry to be a pain, but I have another question for you:
How do I automatically stop the slideshow after it has completed one complete cycle? I’d like it to not go on indefinitely and I can’t figure it out. Again, I’m a jQuery newbie and sorry for all the scripting advice!
Chad
@Chad
look http://maxb.net/scripts/jbgallery-2.0/docs/_chad.html
bye
Max, it’s me again. First off, thanks so much for your plugin and help towards jQuery newbies!
Two questions:
1) I am trying to get some javascript running inside the “caption” area (things like Hoverflow, Blend, etc.) and although the scripts work throughout the site inside my personal “$(document).ready(function(){ });” script, the same scripts don’t work when applied to elements in the “caption” area UNLESS I actually hardcode the scripts ala “my scripts here” inside each “caption” element. Any advice how I can access my scripts from my “personal.js” file instead of having to hardcode them into each caption area?
2) I’d like to make a donation on account of your script and all your help. Do you have a paypal account + email so I can send some money your way?
Hi Chad
1) Can you publish a demo please?
2) I thank you very much for your kind proposal, but it is not necessary! I do that with pleasure, in my spare time. One day or another, I’ll link an amazon wishlist
gran bel lavoro! complimenti.
aggiungerei oltre al fade questi effetti:
http://tobia.github.com/CrossSlide/
@raffaele
grazie, molto belli!
Thank you so much for this great script!
Is there anyway to jump to the last slide?
right now there is a function in the API called “go”, but it requires a specific number.
Thanks!
@Sean
http://maxb.net/scripts/jbgallery-2.0/docs/last.html
Great script ! Thank you !
One question : How can I add labels in the menu bar (after INFO, I would like to add my blog’s link…) Thank.
Hey everyone i’m quite new to the jquery/java thing… i can’t figure this out for the life of me. I’m following the steps to what i think is right and all i get are errors. I even just uploaded the jbgallery2.0 file to my server and it looks ok but there is no scroll bar on the right.
any help would rock!
thanks
JIM
Running FF 3.6.3
jbgallery file upload:
http://bluecollarjim.com/test/jbgallery-2.0/
my site design (the begining)
http://bluecollarjim.com/test/
@jim
add this css rule.
#jbg-content{overflow:auto}Sorry, I updated the demo, but not the zip package.
@Arnone
http://maxb.net/scripts/jbgallery-2.0/docs/last.html
earlier I wrote in about a way to jump to the last slide and I have caught an exception to it’s functionality in safari.
If you are already on a specific slide, and attempt to access this same slide from a button using the “go” API, safari hangs on the preloading screen.
I toggled my button for jumping to the last slide to jump back to the first slide. But this may not work for some, if you want to have a button that only goes to say “slide 3″.
I just wanted to report the bug for you and anyone else.
I’m
@Massimiliano
Thanks for the Css update. I’ve added the code into both css files and still i’m not seeing any change…
http://bluecollarjim.com/test/
my web developer plugin for FF is telling me that the jquery is not defined…
@jim
404 not found.
http://bluecollarjim.com/jbgallery-2.0/jquery.1.4.2.min.js
@Sean
What version of Safari? I tried with safari 5 (winxp) and it seems works fine.
@ALL
Today I fixed a little bug (chromium & opacity).
Superb job.
I was wondering if you had a better way to correctly resize the thumbnails on the slider. On my trial site I recalculate with PHP proportional height and width to fit the 51px square and add the size info in the (for example).
I have to delete the info in the CSS #jbgs li img
All my images are not of the same size
Thanks
Safari Version 4.0.5 (6531.22.7)
Ok so i started from scratch… all files are linking correctly. i checked all my files and my image to make sure they are showing up on there own and all of that is working. now all i’m getting is a blank page.
here’s a link
http://bluecollarjim.com/test/jim/
p.s. sorry this is a pain
p.s i’m getting these error’s everytime.
Warning: Error in parsing value for ‘min-height’. Declaration dropped.
Source File: http://bluecollarjim.com/test/jim/jbgallery-2.0.css
Line: 23
Warning: Error in parsing value for ‘min-width’. Declaration dropped.
Source File: http://bluecollarjim.com/test/jim/jbgallery-2.0.css
Line: 23
On another note. I got it working! I noticed a was missing.. put it in and walah!! its always the smallest things i swear. thanks for the help! LOVE THIS SCRIPT!
OK so now i’ve tried to implement the code into my wordpress theme… i can’t seem to get it to work. is there something different i need to do for a php vs and html file?
i have all the code in my header.php file and my index.php file is calling it.
you can see everything here.
http://www.bluecollarjim.com/test
@Alain
Thanks Alain.
Sorry but in this version (first with slider) the thumbnails dimensions are fixed (not configurable).
but in my demo thumbnails vary in size and CSS rules do not distort the proportions.
Thank for your response, but my point is not the size of the pictures in the slider that you can adapt to each owns need, but to the proportion. Your CSS and code force any input proportion (4:3, 16:9 or anything) to the one chosen in CSS, thus distorting all images not with the same proportion as in CSS
You can see it clearly here.(I take this link in previous post)
http://snarglr.com/pictures.php
I think the only way is to automatiquely modify the tag to include the correct width and height to fit in the slider, but I don’t know how to in javascript/jquery. I do it with PHP.
Anyway great job.
Sorry read : modify the “img” tag
@Sean
Chromium also! now I try to solve. thanks for reporting the bug.
@Alain
http://maxb.net/scripts/jbgallery-2.0/docs/_test_thumbs_menuslider.html
http://maxb.net/scripts/jbgallery-2.0/docs/style_test.html
This is a first attempt. I have to fix a bit,
there are some bugs
PS: by the time I tried only with firefox.
Massimiliano,
Thanks, it is allready a big improvement, even if not perfect, real photos are not so distorted as your test ones.
I tried it also with IE8. It works even better, except that the thumbs are not centered. They appear on top.
Is your solution able to cope with rectangular slide in the slider ?
Alain
@Alain
I’m working. The thumbs are not centered because they are not yet loaded. I am looking for a cross-browser solution.
Will update soon.
@Alain
Try now:
http://maxb.net/scripts/jbgallery-2.0/docs/_test_thumbs_menuslider.html
I fixed some bugs (one very important in function _get_dimensions).
I tested in Chrome, IE6-8, firefox, safari5. The bug “thumbs not centered” is still present in some cases chromium / ubuntu (low priority).
PS: I did not understand “able to cope with etc…”. Sorry but my English is really poor.
@All, @Sean
Updated files. Many bugs fixed.
cool.
I’ve noticed a small bug yesterday at a clients office… Or at least I think it MAY be a bug.
Feel free to look at my site : dluxstudios.com and check things out.
Here are the details : The browser was Safari 5, and we were looking at my folio site on a very big cinema display, 27″ or 30″. And the gallery wasn’t zooming images to the full height of the browser / stage height. This wasn’t occurring in Firefox.
My images are fairly large.
But the zoom was stopping at their full width, leaving the background showing through at the top and bottom.
Any ideas?
My setup is fairly simple –
jQuery(“.jbgallery”).jbgallery({
style:”zoom”,
menu : “simple”,
clickable : true,
caption : true
});
thanks for all the other updates!
@Sean
Sean, update js and css (download new version). I fixed also that bug. I hope …
Hi,
very compliments for this great plugin, I would like to inform that in webkit browser (safari, chrome, ipad-iphone) when resize the windows loose the aspect ratio.
I’ve an Apple 30′ and the problem are only when streach very much (over the center of the screen).
By
Hi Massimiliano,
really great work you’ve been doing with this plugin. I may just have noticed a small bug in the latest beta of 2.0:
Line 177/178 (if($.metadata) _metadata = $(el).metadata();) produces an error if I use the Metadata-Plugin by John Reisig.
I changed the line 84 to “var _options = new jBGallery.Options(this, options);” and the line 172 to “jBGallery.Options = function(el, options){” and everything worked fine. No big deal so.
Thanks again for this plugin. Saved me a lot of work.
Steffen
Hi Massimiliano!
This is such a fantastic script!
I’ve implemented it into my client’s website, however, I’m having trouble with the full screen background slideshow causing embedded video to stutter.
Is there any way I can trigger the slideshow to stop running when a user clicks on a video link?
Please see here for a relevant example:
http://www.halon.com/web/our-services/
Hi again, Massimiliano! I just wanted to let you know there is an update that I’ve posted here about my issue:
http://www.halon.com/web/our-services/
This is a great plugin. Thanks.
I am not sure if this is a known bug but something strange is happening to me. In IE, (7,8) if I view your 2.0 beta from your online site, the slideshow works great. But if I download your demo and test locally, both these IE first show the image on its actual size (crops) and then expands to fullscreen. So, if your window size is 1400px wide and your image is 950px wide, the image (seems to be zoomed fullscreen) first appears cropped to 950px wide and then expands to cover 1400px. Its happening in transitions. I have confirmed from 2 different PCs located around the world (I asked a friend to test).
In IE when I hit debug (developer tool), I see the image has height / width set to original even though the image itself is zoomed.
If you want to see what I mean, I would love to get in contact and probably record a few seconds video too.
Please help.
Thanks,
Chandra
Hi MaxB,
Great work – is there a way to have the images crossfade instead of fade through black?
How do you get the images to show at their original size? I have 800×600 images on my page but they get centered and look blurry.
just messin about with this amazing gallery…..is there a way to have anything else like…flash, or a video displayed when one clicks on the “numbers” menu.
i’ve tried and tried….i don’t have a site up proper yet….
but would be pretty cool to have one the the background images not be an image but rather some other form of data, ie.,html, flash, etc.
tia,
uxepi
First, great work!
Second, I think I found a bug. Go to multi demo (http://maxb.net/scripts/jbgallery-2.0/docs/multi.html). Click on open1. Click next a few times. Click Close. Click open2. Click next a few times. You don’t see the ajax loader. FF 3.6.8 on Mac 10.6.4. Same bug on Safari and Chrome.
krko
Just a small question, is there a way to display the images at their native size without resizing them?
Thanks,
krko
Hey Massimiliano, really great work man!
I have one ‘problem’ in IE8: I have a the scroll bar on the right side of the page. It can not be used, but it’s there… It’s only in IE, FF works fine. Is there a way to solve this? It’s a Joomla website.
@Steffen
Thaks Steffen, I think I solved the problem. You should use test_style.html. and then, if you continue to see bugs please contact me again.
@Steffen
Thanks, I had never tested it before. Now I solved the problem. Demo: metadata.html
@Amy
Sorry Amy (:
your demo seems to work. I was on holiday but I see you could do want you were trying to. Sorry but I don’t understand the problem you had with the two stopslideshow keys. I removed the unusefull code html/js and it works, congratulations!
demo
Thanks Chandra, I hope to have understood you description.
@Chandra
Let me know if you get the problem with this demo or if this is not what you mean.
demo1
In my opinion it should be almost correct in thi s way. Script is unobtrusive, images appear at the beninning. Js creates the gallery’s interface and improve its feature asap.
If the rendering is fast enough, you will not notice anything (chrome).
Instead, if it is slow, you will notice a list of images (ul) and then the interface appearing.
To solve the problem, you can hide (css) the ul.
demo2
Hiding the ul by the css prevents the browser with disabled javascript to display images.
@Tim
sorry but it seems difficult. I will try, if I succeed I will tell you but I do not know how to overlap two images in the zoom version. I’ll try.
@Krko, Serb
I insert the option style “original”. Please, check the demo (click ORIGINAL and then the various dimensions). I used styles css “centered” without js resizing but maybe it coud be better to make a mix: resizing if images are bigger than the screen and leaving without js resize if they are smaller.
@uxepi
I’m sorry but you can implement the menu from outside, using api. For special actions on the background of the gallery, you can use the jbgallery method (“go”, N)
@krko
Solved. Thanks for your remark. I moved the loading (prepend to body).
@Kees
could you please send me a link with a demo about your problem?
Hi Massimiliano,
Of course, it’s: http://www.kmcomputerhulp.nl/anike/
Hey Massimiliano,
Thanks for addressing my comment. I think I found another bug
Once again go to the multi demo. The loading works just fine. Thanks for fixing that! However, all works fine as long as the style is defined as centered. Try changing style in the jbgallery-2.0.js to “original” and you’ll see few things happen. Click open1. Menu doesn’t dissapear. You can still see it at top left. Images show just fine. Click close. Now click open2. Menu doesn’t disappear and images don’t show.
Thank you in advance.
krko
@kees
update line 18 (jbgallery-2.0.css) : overflow:hidden
html.jbg,body.jbg,.jbgallery,.jbgallery table,.jbgallery td{overflow:hidden;background:#000;font-family:FreeSans,Arial,Helvetica,sans-serif;width:100%;height:100%; margin:0;padding:0px;}YES! It’s solved it, thanks a lot!!
Hey there again,
I’ve found out that the solution you’ve offered works for the whole website. So pages that needs to scroll has no scroll bar and therefore cannot be scrolled.. For example the contact page: http://www.kmcomputerhulp.nl/anike/index.php?option=com_contact&view=contact&id=1&Itemid=75
Is there a possibility to apply the “overflow:hidden” rule only on the homepage?
@kees
http://maxb.net/scripts/jbgallery-2.0/docs/_anike.html
1)
$j(".jbgallery").jbgallery({ menu : "numbers", style: "zoom", caption : false, ready : function(){ $j('#jbg-menu').appendTo('#wrapper-absolute'); } });2) add
<div class="main" id="jbg-content"> <div id="wrapper-absolute" style="position:absolute;width:100%;"> <div id="wrapper-relative" style="position:relative;margin:0 auto 0;width:980px;">Ok, I’ve changed and added the 2 that you said, but then the homepage gets screwed up.. Check it for yourself at http://www.kmcomputerhulp.nl/anike/index.php
Hey Massimiliano,
To start… what a great Image gallery library!
Secondly, a small question, I was trying to modify the library so that all the overlay items would follow the image instead of the whole page…
So the caption, Prev & Next buttons and the slider would always fit inside the image.
My little demo has everything working except for the Slider: http://www.versweyveld.info/photogallery/demo.html
Any thoughts on how to get this done? And is my current solutions good enough?
Greets
Hi Massimiliano, a question about the license, can I include your script inside a website theme for a work?
Let me know,
thank you and great job!
@Luca
Yes, you are free to use it, modify it etc. …
Ciao Max
hi there, I have a simple question for you,
i would like to use a basic JB gallery inside of my webpage. I would like it to load in the content box on the right of this page when the specific gallery is selected.
http://www.serafinagoodfood.com/test/index2.html
but i cannot figure out if it is possible to select the div that jbgallery is contained in and via JS or CSS change the size to be fluid with the expansion of the page.
currently i use AJAX to load the external content but when i tried that the gallery didnt initialize and I cant figure out how to change the size of the gallery to just place it on the page.
so basically: is it possible to load the gallery into an AJAX content box and if not is it possible to change the size and location of where the gallery div is displayed?
thank you
Hey Massimiliano,
Any chance you have an update about what causes the problem described in my comment No. 77 (http://maxb.net/blog/2010/03/29/jbgallery-2-0/#comment-16050).
Thank you!
krko
@Mitchell
I’m sorry, but this script works in fullscreen. Maybe with a little hack you can change it. I don’t know.
Hey Massimiliano, Just wondering if you could contact me and supply me with some help on customization, there are a few implementations i can not figure out.
I am running your menuslider @ Http://www.indesweb.ca/test/
Big fan of the gallery. I’m playing with the multi gallery, is there a way to keep the main nav that selects each gallery’s to always be visible so the user can quickly go from one to the other without having to close each one?
Ciao Massimiliano,
first of all, your gallery is amazing.
I have just a problem with IE8: when the image changes, the page scroll back to the top of the page, as a normal refresh:
http://epicstuff.com/hamacaloca/cabane.html
I checked your demo page to see what’s wrong in my code, but I couldn’t find a solution.
Could you please help me?
Grazie 1000,
Filippo
Problem solved!!!
Filippo
I liked this gallery very much it is superb.Is it possible to make to view the images in full screen mode. At present I use F11 in my browswer.Please advise.
Thanks
Hello,
I really like your gallery. Do you know if there is (comming) a joomla module where you can easily adjust things in the backend. reason I am asking because there are some nice websites with this gallery using joomla
Thnx in advance
hi there,
great stuff!!
i am only slightly experienced when it comes to programming so i am trying to start off very “solid”.
how do i move the menu?
in which file is it hidden and how can i place it in my -container?
what is the syntax? i have a menu of “PREV 1 2 NEXT” on my site but it is displayed on the bottom of the site.
i want to display certain pictures out of a wordpress post, how can i adress the wordpress-loop for a single post to take out images and wrap them up in a gallery?
thanks so much for info
stefan
Beautiful job on this awesome plugin. We implemented it in our latest Joomla template and it turned out great. http://yum.pixelpointcreative.com
I do have one question. I saw the option to start on a specific number, but is there a way to randomly start the slideshow? Since we are using it as a background changer, we wanted to have a random option so that as you view the site it will randomly load an image on page load rather than always starting on the same one.
I would appreciate any feedback you could give. Thanks!
Thanks for the plug in.
I am trying to figure out how to have the caption visible when a slide show opens. So instead of having to click on “info” to see a caption, the caption is visible from the start. I have gone over the your js and css and it looks like the js is “telling” the caption to be invisible on load and I can’t seem to figure out where to change it so that it is visible. These are my options:
jQuery(document).ready(function(){
jQuery(“.jbgallery”).jbgallery({menu : “simple”,
style : “zoom”,
slideshow : true,
clickable : true,
labels : {
play : “play”,
next : “next”,
prev : “prev”,
stop : “stop”,
close: “close”,
info : “info”
},
});
});
Thank you for you help.
Hello. I am responding to my last comment. I figured it out. (I think)
I changed line 657 from hidden to visible.
_containers.css({visibility : “visible”, height: “”});
If there is a better way I would love to know.
thanks
Daniel
ok, so please forgive me if this is a stupid question, but I don’t really know much at all about this kinda scripting, I just kinda dug through the code and stumbled into how to get it to work for me…kinda…
My problem is, I have a few hundred pictures I want to load into this kinda gallery. First off I’m trying to find a way to just have to point to a directory and load up all the images from there into it, if not possible I guess I could just hardcode in links
But my real problem comes when trying to load the gallery with that many image links, it ends up trying to load them ALL in one go, and ends up slowing down the script greatly. Next it also seems to have broken the scrolling page thing at the bottom for the slider version.
Just wondering is there a way around this? or should I just look for a different solution for trying to display a few hundred pictures?
add random image load
http://www.grayhats.org/articles/34-opensource/144-intermediate-jbgallery-20-add-random-image-loading
scusa max, ma perche non hai aggiunto la feature del random load?
@Carlo
Ciao Carlo, prima di tutto ti ringrazio.
Appena avrò un po’ di tempo, aggiungerò la tua feature e aggiornerò lo zip.
Scusa ma ora non ho proprio il tempo.
Grazie ancora Max
oooook
pensavo non fosse “buona” se ho accesso al repo ci posso pensare anche io.. cya!
@ALL
Plugin updated – changelog.
Thanks to Carlo Denaro.
Download
What an amazing gallery! We are super excited, but it is loading very slow on the front end.
Any ideas?
Right now all images are at 72dpi and about 200k.
Would really appreciate the help!
@Marc
Server very slow
matthiaslot.com – Image 378.2 KB
GET bg_street.jpg
http://www.matthiaslot.com/templates/theme573/images/bg_street.jpg
200 OK
matthiaslot.com
378.2 KB
22.5s
Speed: 378/22 = 17KB/s
“My” picasa server (Image 717 KB) :
GET P1020533.jpg
http://lh3.ggpht.com/_JJJpzXdPAI4/SpzvrjvU83I/AAAAAAAABAU/8tbAipa9wgk/P1020533.jpg
200 OK
lh3.ggpht.com
717 KB
1.89s
Speed: 717/1.8 = 379KB/s
The important thing is that jbgallery wait the load event of each picture before moving to the next.
I suggest you use picasa as hosting of your images.
… but you can just change the hosting.
@ALL
Plugin updated – changelog.
Download
See this demo (186 images “lazy” loaded):
http://maxb.net/scripts/jbgallery-2.0/docs/hundreds_picasa.html
@ALL
Dev version (menuslider + lazy push):
http://maxb.net/scripts/jbgallery-2.0/docs/hundreds_picasa_menuslider_dev.html
http://maxb.net/scripts/jbgallery-2.0/jbgallery-2.0.dev.js
great work max!
Hi, maybe you have noticed already but there is a serious problem with recently released Opera 11. Jbgallery-2.0 simpy stopped to work after upgrade.
@Konrad
Tomorrow I’ll try.
@ALL
Here’s a preview of version 3.0.
http://maxb.net/scripts/jbgallery-3.0/
Version 3.0 has a very powerful API that allows to load hundreds of images at runtime, a caption much easier, and some bug fixes.
http://maxb.net/scripts/jbgallery-3.0/docs/advanced/api.html
http://maxb.net/scripts/jbgallery-3.0/docs/adapters/picasa_api.html
http://maxb.net/scripts/jbgallery-3.0/docs/caption/caption.html
BYE
@Konrad, ALL
opera 11 fixed.
will last update?
Download
Dear Massimiliano,
Thank you very much for a beautiful full screen gallery.
I have a question. I’ve built a gallery with many, many pictures. When I goto the gallery page, it takes forever to load. Is there a way to only preload 1-2 images? (I think it tries to load all images before showing the page.)
Thank you very much,
Cem
@Cem
Hi Cem
in jbgallery 2.0 there are 2 menus.
1) the first one “simple / numbers” : with this menu jbgallery loads one image at each time.
When it goes forward / backward / to one specific image, it loads another image and so on.
So that you don’t need to preload / lazyload a lot of images.
For this reason, I suppose that your problem could be related to the second menu (slider).
2) the second slider menu : in this menu jbgallery loads the central image at a time
(as we saw in the first menu), AND it loads in the slider a lot of thumbnails.
if you optimize well the size of the thumbs you should not need any lazyload mechanism.
Obviously, you should have some problem if you have hundreds images.
@ALL
That said,
in jbgallery 3.0
http://maxb.net/scripts/jbgallery-3.0/
API supports the pushing of one or more images “at runtime”.
if you look at these demos:
http://maxb.net/scripts/jbgallery-3.0/docs/advanced/api.html
http://maxb.net/scripts/jbgallery-3.0/docs/advanced/push_hundreds_from_picasa_menuslider.html
you will see you’ll be able to :
- empty jbgallery (that option is usefull only to better understand what I’m saying)
- insert one or more images at the beginning or at the end of the stack (push()/unshift())
- remove images one by one (pop()/shift() this could be useful in very special cases, es: when images tend to infinite)
So, with jbgallery 3.0 (and the new API) you can manage the loading of hundreds thumbnails.
Please carefully look another time at this demo:
http://maxb.net/scripts/jbgallery-3.0/docs/advanced/push_hundreds_from_picasa_menuslider.html
At the beginning there is only one image.
Then, I insert in the gallery, at runtime, entere albums taken from picasa.
Is up to you how you insert these images (your strategy):
– how many images at any time
– the interval between one insertion and the following
I mean: the inserting strategy is not responsible for jbgallery 3.0
I’m giving you an API so you are completely free.
For example:
You can push only one image at a time.
When jbgallery loads the last image of the gallery you can push a new one.
And so on.
You can push 10 pictures at the same time.
When jbgallery loads the last image or the second last, you can push 10 new images.
And so on.
Please upgrade to the realease 3.0.
I don’t see many comments yet
I would appreciate that the small community born around this script would follow the development of jbgallery, not continuing to use the older 2.0 version.
Thank you
I would also appreciate to receive some little help from this small community.
For example I really thank Carlo Denaro who suggested me the randomize option, and @WD40 who pointed me his need of managing hundreds of images.
So Cem, I really hope to have been usefull for you.
Bye bye to everyone
Max
Hi Max,
Thank you for such a detailed reply. Very nice additions on the 3.0
I think that people are stumbling upon 2.0 because it’s listed in a lot of blogs in “Top 10 Jquerry Galleries”
I understand the power of 1 image, and then pushing more images at runtime. Thank you!
Ciao Massimiliano,
ho un problemino con la scrollbar alla pagina: http://www.salvolocastroeventi.it/test.asp
lo slideshow funziona a dovere, la scrollbar non compare; tuttavia se uso il roller del mouse lo scrolling avviene tranquillamente.
Ho provato a mettere un overflow:auto nel css, ma niente.
Sai dirmi sono sbaglio?
Grazie infinite e complimenti per l’ottimo lavoro.
…con calma mi vedrò le features della versione 3
Dimenticavo:
per far comparire il resto degli elementi del sito ho dovuto inserire anche questo:
.jbgallery{position:absolute;top:0;left:0;z-index:1;width:100%;overflow:auto;}
all’interno del css principale “index.css”
Forse è qui lo sbaglio?
@Pierpaolo
Ciao, penso sia la posizione del div con i contenuti.
Scusa non ho tempo per farti una demo.
Prova a spostare il tuo wrapper dei contenuti SOPRA il div di jbgallery.
Guarda la mia demo e il suo sorgente.
http://maxb.net/scripts/old/jbgallery-2.0/
Segui esattamente quell’ordine. Vedrai che la scrollbar comparirà e ti permetterà di scorrere gli elementi del div.wrapper.
Ciao Max
@Massimiliano
Grazie infinite per il suggerimento. Ho provato, ma niente da fare.
Provo a strutturare nuovamente il layout; credo che richiami un po’ troppo “caratteristiche” e “script” in generale.
Grazie ancora,
Pierpaolo
2 Trackbacks
[...] jbgallery 1.0 03.30.09 | 45 Comments ATTENTION : jbgallery 2.0 BETA [...]
[...] Post a comment in my blog. http://maxb.net/blog/ [...]