(function() {

// MAXB.NET LABS

})();

javascript, jbgallery, jquery, plugins

jbgallery 1.0

Posted on 30 March 2009 by Massimiliano Balestrieri | Comments
ATTENTION : jbgallery 3.0 BETA

DEMO SITE

jbgallery is a webpage UI widget written in javascript on top of the jQuery library.
Its function is to show a single big image, multiple images, multiple gallery, slideshow, as site’s background or in “dialog” mode or as a common pop-up
jbgallery has two basic menus, one has music player buttons the other gives directly links to single images.
jbgallery provides a pubblic API to remote control the component, so it would be easier to bind also with a more complex menu (i.e. with thumbnails).

Examples:

Installation

Download and extract

jbgallery-1.0.zip

Or download single files :

Scripts js (include in head tag)

<script type="text/javascript" src="jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="jbgallery-1.0.min.js"></script>

HTML structure

<div class="jbgallery">
  <ul>
    <li><a href="1.jpg" title="alternative text">1</a></li>
    <li><a href="2.jpg" title="alternative text">2</a></li>
    <!-- etc -->
  </ul>
</div>

JS

<script type="text/javascript">
jQuery(window).jbgcss("jbgallery.css");//customize url
jQuery(document).ready(function(){
  jQuery(".jbgallery").jbgallery();
});
</script>

OPTIONS & DEFAULTS

Write options HERE :


jQuery(".jbgallery").jbgallery({HERE});
[/code]

DEFAULTS

{
  style     :  "zoom",    //"centered", "zoom"
  slideshow :  false,
  menu      :  "simple",  //false, "numbers", "simple"
  interval  :  4000,
  fade      :  false,
  fade_time :  400,
  shortcuts :  [37,39],   //left and right arrows
  before    :  function(){}
  load      :  function(ev){},
  after     :  function(ev){},
  popup     :  false,
  close     :  function(ev){},
  labels    :  {
        play : "play",
        next : "next",
        prev : "prev",
        stop : "stop",
        close: "close"
  }
}

OPTIONS

  • style : string ('zoom'/'centered')
  • slideshow : boolean (true/false)
  • menu : string/boolean ('simple'/'numbers'/false)
  • interval : number (milliseconds for slideshow)
  • fade : boolean (false/true)
  • fade_time : number (milliseconds for fadeIn/fadeOut effect)
  • shortcuts : array (keycodes for trigger events left/right via keyboard)
  • before : function (callback)
  • load : function(ev) (callback - native image load event)
  • after : function (callback)
  • 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"
    }

API (developers/designers)

  • jQuery("#jbgallery").jbgallery(); // build object FIRST
  • jQuery("#jbgallery").jbgallery("go" , 2); // trigger event go, go to photo 2 if exist
  • jQuery("#jbgallery").jbgallery("left"); // trigger event left (prev)
  • jQuery("#jbgallery").jbgallery("right"); // trigger event right (next)
  • jQuery("#jbgallery").jbgallery("play"); // trigger event play - autoplay start
  • jQuery("#jbgallery").jbgallery("stop"); // trigger event 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 (winxp/linux)
  • Safari 3.2, 4 (winxp)
  • Chrome 1/2 (winxp)
  • Opera 9.6/10 (winxp/linux)
  • Internet Explorer 6/7/8 (winxp)
  • Konqueror 4.2.1 (linux)

KNOWN BUGS

Opera

I can't prevent on the keydown default event (arrows) in Opera.
At "arrows" keydown that causes a pervers effect.
If you know a solution, please contact me.

DESIGN/GRAPHIC

The 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

Photos by Chicca Vancini.
Thanks to Carlo.
Depends by jquery-1.3.2 by John Resig.

LICENSE

Copyright (c) 2009 Massimiliano Balestrieri
Licensed GPL licenses:
http://www.gnu.org/licenses/gpl.html

This entry was posted in javascript, jbgallery, jquery, plugins and tagged , , , , , . Bookmark the permalink.

49 Comments

  1. Gary
    Posted 22 May 2009 at 06:08 | Permalink

    Is there a way to display the title string for each image?

  2. Massimiliano Balestrieri
    Posted 22 May 2009 at 09:23 | Permalink

    @Gary

    http://maxb.net/scripts/jbgallery/docs/caption.html

  3. branis
    Posted 3 June 2009 at 04:54 | Permalink

    im just interested in bugs in ie6 u’ve experienced.
    i set it up folowing the documentation, but its not working in ie6.
    thanx ahead

  4. Massimiliano Balestrieri
    Posted 4 June 2009 at 10:33 | Permalink

    Could you please be more clear?

    http://maxb.net/scripts/jbgallery/docs/base.html
    http://maxb.net/scripts/jbgallery/docs/test_ie.html

    I don’t understand which ie6 bug you are referring to.
    It works for me.

  5. Prokopis
    Posted 11 June 2009 at 20:59 | Permalink

    Ciao Massimiliano e complimenti per questo favoloso lavoro ;-)

    Ho una domanda da farti.
    Ho installato jbGallery (tutto funziona alla grande) e cercato di installare anche smooth scroll (su base jQuery) ma quest’ultimo non funziona nella stessa pagina.

    Cliccando sul’ultimo link poi guarda che succede.

    Premetto che non sono cosi tanto pratico con javascript per cui ti chiedo cortesemente di darmi una risposta non tanto complicata :-)

    Di sicuro sono io a sbagliare qualcosa ma non trovo cosa, heheh.

    Trovi un anteprina qui:

    http://www.pakis.comyr.com/testing/default.htm

    Grazie.

  6. Massimiliano Balestrieri
    Posted 12 June 2009 at 10:44 | Permalink

    @Prokopis

    http://maxb.net/scripts/jbgallery/docs/prokophs.html

  7. Prokopis
    Posted 12 June 2009 at 10:58 | Permalink

    Grazie Massimiliano.
    Questo script è davvero spettacolare :-)

  8. Prokopis
    Posted 14 June 2009 at 14:50 | Permalink

    Ciao Max.
    Ho messo il sito offline per fare delle modifiche e farvelo al completo fra qualche giorno :-)

  9. Peter
    Posted 17 July 2009 at 23:49 | Permalink

    Hello,

    Is there a ‘optimal’ image size in pixels? Meaning finding a balance between decent resolution and small image size?

    Thanks!

  10. eddie
    Posted 13 September 2009 at 23:44 | Permalink

    Hi, great plugin you’ve created!

    Is there a way to add a link to each image? So that when you click the image it is hyperlinked? I am currently using the ‘menu with numbers’ version and would link to use it as an intro to my site, where the linked image would take you to a specific page.

    Look forward to reading your reply.
    Thanks,

  11. Massimiliano Balestrieri
    Posted 14 September 2009 at 10:04 | Permalink

    @eddie

    see this solution:
    http://maxb.net/scripts/jbgallery/docs/links.html

    Max

  12. eddie
    Posted 14 September 2009 at 18:09 | Permalink

    Hi Massimiliano,

    Thanks for creating that revised script, I checked it out and it works great! One small thing that is totally necessary is I notice my mouse/cursor is not acting like a hyperlink when hovering over image. Is it possible to have the mouse/cursor show the hyperlinked state?

    Thanks for this great work.

  13. Massimiliano Balestrieri
    Posted 15 September 2009 at 09:57 | Permalink

    @eddie

    try now :)
    http://maxb.net/scripts/jbgallery/docs/links.html

  14. eddie
    Posted 17 September 2009 at 02:21 | Permalink

    Big thanks Massimiliano – brilliant!

    Eventually, I would like to use this on my future launched site at garrawayadvertisinganddesign.com. In the meantime, I am experimenting with your script using a http://cargocollective.com site. You can see my current incarnation of it here: http://cargocollective.com/testsite1_TEMP. Note: the site is entirely dummy content for testing.

    Have you heard of these guys yet? Check it out, it’s one of the best template platforms I have ever seen, and first I have ever even considered trying – mostly creatives, programmers using it. I have been promoting your jbgallery within their forum and have gotten some good feedback.

  15. Kenneth
    Posted 22 September 2009 at 16:25 | Permalink

    Hi, Great Code…

    I have two issues that i hope someone can help me out with.

    1. Have added some code to hide the menu and the cursor, but the hiding of the cursor only works on Firefox, not on Opera or IE.
    jQuery(document).ready(function(){
    jQuery(“.jbgallery”).jbgallery({
    slideshow : true,
    menu: ‘simple’,
    interval : 3000,
    fade_time : 600,
    fade: false,
    popup : true,
    style: ‘centered’
    });
    jQuery(“.jbgallery”).mousemove(function(e){
    clearTimeout(t);
    jQuery(“.jbgallery”).css({cursor: ‘default’});
    jQuery(“.jbg-menu”).show(“slow”);
    t=setTimeout(function () {
    jQuery(“.jbgallery”).css({cursor: ‘none’});
    jQuery(“.jbg-menu”).hide(“slow”);
    }, 3000);
    });
    });

    2. Images with dimensions like: 1024px × 576px works OK, but for images it dimensions like 576px × 1024px, it don’t center the image.
    suspect the .css code: .jbgallery img.centered{min-height:auto;min-width:auto;}
    don’t work.

  16. Massimiliano Balestrieri
    Posted 22 September 2009 at 18:36 | Permalink

    @kenneth

    1) cursor:none doesn’t work in webkit (chrome, safari) in ie and in opera.

    http://maxb.net/repository/tmp/cursor/cursor.html

    see also here

    http://www.w3schools.com/CSS/pr_class_cursor.asp

    2) TODO :)

  17. Massimiliano Balestrieri
    Posted 22 September 2009 at 19:07 | Permalink

    @kenneth

    2)

    see here:

    http://maxb.net/scripts/jbgallery/docs/_centered-bug.html

    the js:

    http://maxb.net/scripts/jbgallery/jbgallery-1.0.svn.js

    line 217
    //$(_target).width(_dim.bw);

  18. joe
    Posted 13 October 2009 at 00:43 | Permalink

    Great work youve done here!
    Question: is it possible to use a link in text and then go to a different (or just next) slide?

    Thank you and good luck with further development!

    Joe

  19. Massimiliano Balestrieri
    Posted 14 October 2009 at 16:07 | Permalink

    @joe

    hi joe, thanks.

    you can use the API to control the component

    jQuery(SELECTOR).jbgallery("left");

    jQuery(SELECTOR).jbgallery("right");

    jQuery(SELECTOR).jbgallery("go", N);//N is the number of slide

    than you can bind to any given link in the text an event click to do it.

    jQuery(document).ready(function(){

    jQuery(SELECTOR).jbgallery();

    jQuery("#ID_LINK").click(function(){

    jQuery(SELECTOR).jbgallery("right");

    return false;

    });

    });

  20. kappa mikey
    Posted 9 November 2009 at 04:03 | Permalink

    hello, very nice and powerful script but i have problem when i want to embed to wordpress 2.8.x.

    i checked everything script path’s ok css classes are true everything is fine. also i tried your script at html same way and it works but when i try wordpress it is just showing inside of a tag of. when i click them i can see my images. i cant figure out what is the problem

  21. kappa mikey
    Posted 9 November 2009 at 04:23 | Permalink

    omg i’m dump!!!! i found the problem!! sorry i just realized i installed jquery.js after your script..

  22. Prokophs
    Posted 28 November 2009 at 14:17 | Permalink

    Ciao Massimiliano.

    sono mancato un pò ma di sorprese ne hai fatte tante con questo script :-)
    Non ti faccio i complimenti ma secondo me ma non si trovano in giro scripts come questo.

    A proposito, ho aggiunto queste ultime novità (captions e links) al progetto di allora, se ti ricordi, ma qualcosa non va.
    Mi spiego meglio:
    - non tutte le foto si vedono andando avanti e in piu non seguono l’ordine della lista.
    - i link non funzionano.

    Come ha scritto Peter a proposito della risoluzione ideale delle foto ci sarebbe qualche soluzione?
    Alcune foto si vedono bene ma altre no, nel senso che un pezzo di loro non si vede se si usa lo zoom.

    Qui puoi vedere il progetto: http://www.pakis.comyr.com/birger/default.htm

    Di sicuro sto sbagliando io qualcosa e il tuo auito sarebbe un miracolo ( il codice mi sa che fa a desiderare, è un casino).

    Grazie in anticipo Massi :-)

  23. Massimiliano Balestrieri
    Posted 28 November 2009 at 15:14 | Permalink

    @ Prokophs

    Ciao, grazie come sempre del commento.

    1)Non tutte le foto si vedono, ad occhio perchè il tuo hosting non ti serve le immagini (hai superato qualche limite?). Ma veramente ho solo dato un’ occhiata alla console di firebug:

    517ms
    GET error.000webhost.com
    http://error.000webhost.com/

    200 OK

    controlla bene le url. vedi se il tuo hosting ti serve le immagini semplicemente inserendo l’url sulla barra degli indirizzi del browser.

    2) il codice contiene degli errori. inizializzi 3 volte il plugin (errore mio che non controllo, cmq). correggi mettendo tutte le opzioni in una sola istanza

    adesso guardo bene e ti passo il codice “sistemato”

    3) i link non funzionano probabilmente proprio perchè dividi il codice della personalizzazione in 3 istanze (ma alla fine la gallery è sempre la stessa, se non sbaglio)

    guardo meglio e ti passo il codice.

    4) per il discorso dell’algoritmo, hai idea di cosa sarebbe necessario? proprio a livello logico intendo. non il codice. quello lo preparo io. oppure hai visto qualcosa in giro che ingrandisce le immagini con una certa logica?

  24. Prokophs
    Posted 28 November 2009 at 15:38 | Permalink

    Ciao Massi e grazie di cuore per la tempstiva risposta :-)

    1. Allora ho cambiato hosting ma le foto non si vedono lo stesso.
    2. lo sapevo che da qualche parte avrei sbagliato (non sono pratico con i scripts)
    3. stesso sopra :-)
    4. Il problema sta nel fatto che le foto in formato landscape (larghezza maggiore dell’altezza) vanno per la maggior parte bene ma quelle in portrait (altezza maggiore della larghezza) non si vedono perche una parte viene tagliata. Secondo me la logica da seguire sarebbe quella che il script prende la foto e la zooma secondo la risoluzione del browser occupando tutta la finestra ma che sia tutta visibile. Se puoi la foto è storta cio si può sistemare aggiustando la risoluzione della foto stessa fiche non si trova il rapporto giusto.
    Per farti capire meglio guarda la foto tutta rossa come si vede diversamente da quella originale.

    Foto: http://www.excelounge.com/birger2/images/5.jpg (ce ne sono nove ma non si vedono tutte)

    Nuovo link:
    http://www.excelounge.com/birger2/default.htm

    Spero di aver aiutato nel mio piccolo e grazie ancora Massi.

  25. Prokophs
    Posted 28 November 2009 at 15:40 | Permalink

    Non so se ti potrebbe aiutare in qualche maniera ma ho appena scoperto che facendo partire lo slideshow cliccando su play le foto si vedono tutte ora.
    Ma non se si avanza manualmente clicando ogni volta su next.

  26. Massimiliano Balestrieri
    Posted 28 November 2009 at 15:43 | Permalink

    @Prokophs

    qui il codice sistemato (il problema del link è dovuto alla presenza di un div in posizione assoluta sopra – non ci avevo pensato). la soluzione che ti propongo (body) non è proprio elegante (hai il link impostato ovunque) però al momento mi sembra l’unica soluzione:

    
jQuery(document).ready(function(){
       jQuery(".caption").css('opacity', '0.7');
       jQuery("#custom").jbgallery({
        	menu: "simple",
              style: "zoom",
	       slideshow: false,
			fade_time:200,
			interval:15000,
	       after: function () {
                var _caption = jQuery("#jbgallery_target").attr("alt");
                var _html = jQuery('<h1>' + _caption + '</h1>')
                jQuery('.caption').html(_html);
    	         var _active = parseInt(jQuery("#custom").jbgallery("current")) - 1;
                var _href   = jQuery("#custom").find("li").eq(_active).find("a").attr("rel");
                //QUI IL PROBLEMA DEL LINK.
                //puoi provare a impostare il click sul
                //1) body : jQuery("body")
                jQuery("body")
                .click(function(ev){
		      var _target = ev.target || ev.srcElement;
                      if(_target.id == "jbg-content" || _target.id == "jbgallery_target"){
                         //console.log("ok");
                         location.href = _href;
                      }
                }).css({
                     cursor : "pointer"
                });
              }
       });

});

    http://maxb.net/scripts/jbgallery/docs/prokophs2.html

  27. Massimiliano Balestrieri
    Posted 28 November 2009 at 15:50 | Permalink

    @Prokophs

    per l’algortimo ci penso. intanto prova anche il settaggio:

    style: “centered”

    al posto di

    style: “zoom”

  28. Prokophs
    Posted 28 November 2009 at 15:54 | Permalink

    Non ho parole, sei magnifico Massi :-)

    Grazie mille…!

  29. Mike
    Posted 12 January 2010 at 14:27 | Permalink

    Hi, great script first of all.

    Is there a way to make the images slide from left to right when you click on prev and the other way on next ?

  30. Massimiliano Balestrieri
    Posted 15 January 2010 at 11:12 | Permalink

    @mike
    option “labels”:

    labels:
    {
    play : “play”,
    next : “next”,
    prev : “prev”,
    stop : “stop”,
    close: “close”
    }

  31. Mike
    Posted 15 January 2010 at 12:21 | Permalink

    What I was thinking of is the same effect u have on YCodaSlider, the left and right arrows.
    http://www.maxb.net/scripts/ycodaslider-3.0/demo/gallery.html

    Thx.

  32. Massimiliano Balestrieri
    Posted 15 January 2010 at 12:41 | Permalink

    @Mike

    AaaaH! ok.

    No sorry. I did not implemented any slider here. Maybe with jQuery 1.4 i will update the script and try something like that. :)

  33. Peter
    Posted 22 January 2010 at 20:58 | Permalink

    Hello Massimiliano,

    Is there a way to make images in the slideshows clickable? So that if I click on the image it will go to the next one?

    Many thanks!

  34. Massimiliano Balestrieri
    Posted 25 January 2010 at 12:54 | Permalink

    @peter
    yes.
    http://maxb.net/scripts/jbgallery/docs/click.html

  35. Peter
    Posted 26 January 2010 at 01:58 | Permalink

    Thanks Massimiliano!

    Being a novice… I have another question…

    Here’s my current script:

    jQuery(window).jbgcss(“jbgallery.css”);//customize url
    jQuery(document).ready(function(){
    jQuery(“.jbgallery”).jbgallery(

    { slideshow : false,
    interval : 4000,
    menu : “numbers”, //false, “numbers”, “simple”

    fade : true,
    fade_time : 1000,
    }
    );
    });

    What pieces of code do I lift over to make it clickable? I’ve been trying to copy and paste in different ways but I keep getting errors.

    Thanks!

  36. Peter
    Posted 26 January 2010 at 02:12 | Permalink

    Nevermind, i think I just figured it out!

    Thanks!

  37. Massimiliano Balestrieri
    Posted 26 January 2010 at 11:31 | Permalink

    @peter
    pay attention to the comma following fade_time : 1000,
    in ie after last element must not have comma, otherwise you will have error js

  38. jelm
    Posted 26 January 2010 at 22:58 | Permalink

    Hi great script!

    I have one question, is it possible to remove the black fade block when you have clickt for next image and insteed have the old image and a loader ?

    Or if you can preload all images and with a loader and then skip the loading part between images.

    thx.

  39. Peter (another one)
    Posted 29 January 2010 at 05:33 | Permalink

    Massimiliano, this is definitely one of the most beautiful gallery scripts out there, especially because it´s so reduced and clear.

    Is it possible to jump to a specific slide in the popup-window from a link? Let´s say, i have a thumbnail gallery with 20 pics on my popup launching page – is it possible to open for example slide no. 15 immediately in the popup window with a click on thumbnail no. 15?

    Thanks a lot!

  40. Peter (the first)
    Posted 18 February 2010 at 23:58 | Permalink

    Hi Massimiliano,
    Another question regarding this script below:
    http://maxb.net/scripts/jbgallery/docs/click.html

    It skips numbers when you click the image, goes 1,2,4,7, 11 etc.
    Does the exact same thing on my test site. Any idea why that is?

    Thanks!!

  41. Massimiliano Balestrieri
    Posted 22 March 2010 at 11:20 | Permalink

    @Peter (the first)

    I’m sorry. Try now.
    http://maxb.net/scripts/jbgallery/docs/click.html

  42. Massimiliano Balestrieri
    Posted 22 March 2010 at 11:26 | Permalink

    @jelm and Peter (another one)

    Today, I will try to give you two custom snippets.
    In the next version I will try to incorporate your suggestions.

  43. Massimiliano Balestrieri
    Posted 22 March 2010 at 12:41 | Permalink

    @Peter (popup)

    http://maxb.net/scripts/jbgallery/docs/popup_launcher.html

    ATTENTION: use
    http://maxb.net/scripts/jbgallery/jbgallery-1.1.svn.js

  44. Massimiliano Balestrieri
    Posted 22 March 2010 at 12:45 | Permalink

    @jeim

    try this solution
    http://maxb.net/scripts/jbgallery/docs/preload.html

    The “after” callback preload next image. I test this solution with “wondershaper” a software for limit bandwith. If I preload all images, the browser suffers.

  45. Mic
    Posted 31 March 2010 at 16:05 | Permalink

    You are fucking genius!
    really. love ur work.
    GREAT JOB.

  46. James
    Posted 16 April 2010 at 00:37 | Permalink

    Hi Massimiliano,

    Excellent Job, great script. A question… is there a way I gave each gallery image a unique url address ID so it can be linked to directly. For example http://jbgallery/image5

    Hope that makes sense,

    Thanks.

  47. Massimiliano Balestrieri
    Posted 16 April 2010 at 08:47 | Permalink

    @james

    yes. see here

    http://maxb.net/scripts/jbgallery/docs/links.html

  48. Jasmin Schneider
    Posted 9 November 2010 at 10:35 | Permalink

    Hi Massimiliano,

    I do love your gallery big time :D
    I am going to use it on my blog (theme by graph paper press) and would like to know if it is possible to randomise the slideshow!???

    Thanks in advance,
    Jasz

  49. Massimiliano Balestrieri
    Posted 9 November 2010 at 10:55 | Permalink

    @Jasmin

    Of course.
    Try this.

    http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html

    You have to shuffle the contents of UL, and then activate jballery on UL.

    Use jbgallery 2.

    http://maxb.net/blog/2010/03/29/jbgallery-2-0/

    bye

One Trackback

  1. By jbgallery – Immagini da Picasa/Flickr via YQL – (function() { on 18 March 2010 at 16:44

    [...] due snippets di codice, per popolare jbgallery via Flickr o Picasa. Il vantaggio è avere a “costo zero” un backoffice per la gestione [...]