(function() {

// MAXB.NET LABS

})();

javascript, jbgallery, jquery, plugins

jbgallery 3.0

Posted on 19 December 2010 by Massimiliano Balestrieri | Comments

DEMO SITE – (UPDATED 2011-05-16)

WHAT’S NEW

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 is 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:

Installation

Download and extract

jbgallery-3.0.beta.zip

Download single files :

Extra files :

  • jbpicasa.js : source – new version.
  • jbpicasa.js : source – test adapter that you can use building an html structure, getting data from an external rss feed.

Usage

js and css (include in head tag)

<link href="jbgallery-3.0.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="jbgallery-3.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)

[/html]
<div class="jbgallery">
 <ul>
  <li>
   <a href="big.jpg" title="Caption title" rel="Caption title link"><img src="small.jpg" alt="" /></a>
   <div class="caption">Long long long text</div>
  </li>
  <!-- etc -->
 </ul>
</div>

1

JS

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

OPTIONS & DEFAULTS

Write options HERE : 

    jQuery('.jbgallery').jbgallery({HERE});

{
  //option   : default value     //see docs/demo for usage - PLEASE FIX MY ENGLISH IF YOU CAN &amp; SEND ME  (thanks!)
    style    : "centered",       //"centered"|"zoom"|"original" - image style
    menu     : "slider",         //false|"numbers"|"simple"|"slider" - menu type
    shortcuts: [37, 39],         //[prev,next] - keyboard code shortcuts
    slideshow: false,            //true|false - autostart slideshow
    fade     : true,             //true|false - disable all fade effects
    popup    : false,            //true|false - modal box &amp; traditional popup hack to display multiple gallery (3.0 : fullscreen:false)
    randomize: 0,                //0|1|2 - randomize first image (1) or randomize "slideshow" (2) - blackout: http://www.grayhats.org
    caption  : true,             //true|false - show/disable internal caption system
    autohide : false,            //true|false - auto hide menu &amp; caption
    clickable: false,            //true|false - "image click &amp; go"
    current  : 1,                //number     - set initial photo (modal "hack" - see demo. don't use "hash". jbgallery use "location.hash" only in popup mode)
    webkit   : (navigator.userAgent.toLowerCase().search(/webkit/) != -1),  //boolean - used for specific browser hack. if you want, you can force disable this flag &amp; try to find crossbrowser solution
    ie6      : (/MSIE 6/i.test(navigator.userAgent)), //boolean - IDEM
    ie7      : (/MSIE 7/i.test(navigator.userAgent)), //boolean - IDEM
    labels   : {                 //labels of internal menu
        play : "play",
        next : "next",
        prev : "prev",
        stop : "stop",
        close: "close",
        info : "info"
    },
    timers   : {                 //timers
        fade    : 400,           //fade duration
        interval: 7000,          //slideshow interval
        autohide: 7000           //autohide timeout
    },
    delays: {                    //delays (timers) to improve usability and reduce events
        mousemove: 200,          //used by autohide. cancel autohide timeout every XXXms.
        resize   : 500,          //used by ie6 to reduce events handled by window.resize
        mouseover: 800           //used by tooltip. show tooltip only if the mouse STAY over thumb for XXXms
    },
    close    : function(){},     //callback handled by menu's button close. see demo. example : close : function(){window.close()}
    before   : function(){},     //callback handled BEFORE image gallery loaded
    after    : function(ev){},   //callback(ev) handled AFTER image gallery loaded. receive the native load event.
    load     : function(ev){},   //callback(ev) handled AFTER native image load event. receive the native load event.
    ready    : function(el){},   //callback(el) handled AFTER jbgallery render. receive the HTML element.
    //WHAT'S NEW - 3.0
    fullscreen: true,            //true|false : the most important feature of jbgallery 3.0. now jbgallery can "stay in a box" and have multiple istance in one page.
    push      : function(o){},   //callback handled by push public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external. useful for external menu system
    unshift   : function(o){},   //callback handled by unshift public method (JBGALLERY API). receive the object/string/array of objects/array of strings passed from external.
    shift     : function(){},    //callback handled by shift public method
    pop       : function(){},    //callback handled by pop public method
    empty     : function(){}     //callback handled by empty public method
}

API (developers/designers)

var obj = jQuery("#jbg").jbgallery({menu : "slider"}, true);//GET API
obj.left();
obj.right();
obj.go(3);
obj.current();
obj.play(4000);
obj.stop();
obj.push(single);//single = 'http://url'
obj.push(aobj);//aobj is array of object
obj.unshift(obj);//obj is a single object
obj.unshift(arr);//arr is an array of string (url)
obj.shift();
obj.pop();
obj.empty();
obj.destroy();

EXAMPLE

var images = {
    single : 'http://lh5.ggpht.com/_JJJpzXdPAI4/SpzvbyPhCHI/AAAAAAAAA-w/rf8dATWiOK8/100_2274.jpg',
    arr : ['http://lh3.ggpht.com/_JJJpzXdPAI4/SpzvrjvU83I/AAAAAAAABAU/8tbAipa9wgk/P1020533.jpg','http://lh5.ggpht.com/_JJJpzXdPAI4/SpzuSpC-0zI/AAAAAAAAA48/M2GPV81K4Ak/100_2090.jpg'],
    obj : {
        href : 'http://lh5.ggpht.com/_JJJpzXdPAI4/SpzvjOmg5-I/AAAAAAAAA_g/S8wow3zLays/P1020744.jpg',
        title: 'Hiroshima',
        rel  : 'http://en.wikipedia.org/wiki/Hiroshima',
        caption : 'Hiroshima (広島市, Hiroshima-shi?) (About this sound listen (help·info)) is the capital of Hiroshima Prefecture, and the largest city in the Chūgoku region of western Honshū',
        caption_css : 'custom'
    },
    aobj : [{
        href : 'http://lh5.ggpht.com/_JJJpzXdPAI4/SpzvjOmg5-I/AAAAAAAAA_g/S8wow3zLays/P1020744.jpg',
        thumb: 'http://lh5.ggpht.com/_JJJpzXdPAI4/SpzvjOmg5-I/AAAAAAAAA_g/S8wow3zLays/s288/P1020744.jpg',
        title: 'Hiroshima',
        rel  : 'http://en.wikipedia.org/wiki/Hiroshima',
        caption : 'Hiroshima (広島市, Hiroshima-shi?) (About this sound listen (help·info)) is the capital of Hiroshima Prefecture, and the largest city in the Chūgoku region of western Honshū',
        caption_css : 'custom'
    },{
        href : 'http://lh5.ggpht.com/_JJJpzXdPAI4/SpzvbyPhCHI/AAAAAAAAA-w/rf8dATWiOK8/100_2274.jpg',
        title: 'Magome-juku'
    }]
};
obj = jQuery("#jbgallery-api").jbgallery({menu : "slider"}, true);//GET API
jQuery("#mm-empty").click(function(){
    obj.empty();
});
jQuery("#mm-push").click(function(){
    obj.push(images.single);
});
jQuery("#mm-pushmany").click(function(){
    obj.push(images.aobj);
});
jQuery("#mm-shift").click(function(){
    obj.shift();
});
jQuery("#mm-pop").click(function(){
    obj.pop();
});
jQuery("#mm-unshift").click(function(){
    obj.unshift(images.obj);
});
jQuery("#mm-unshiftmany").click(function(){
    obj.unshift(images.arr);
});

NOTES

BROWSERS TESTED

  • Firefox 3.6
  • Chrome 8,9
  • IE6,7,8,9
  • Opera
  • Safari

DESIGN

This component is published with two graphic layout.

You are free to customize css and to ask me any change to add classes to the menus edited by me.
If you use API or design more complex menus, or if you write plugins populating html lists pushing images
(see picasa 3.0 adapter) 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.4.4) by John Resig.

Thanks to Carlo Denaro, Simone Parato, Aaron Hutten, Alain Bourgeoa, Steffen Wenzel

CONTACTS

Post a comment on this post.

LICENSE

Copyright (c) 2010 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.

141 Comments

  1. max
    Posted 20 December 2010 at 14:50 | Permalink

    test feedback

  2. Andrea Fercia
    Posted 20 December 2010 at 23:55 | Permalink

    ciao,
    riguardo al problema delle immagini in cache e onload vedi anche tuo commento alla linea 420: “la cache di chrome (?) non fa scattare l’evento” ..ecc
    a me il problema si è presentato con Opera 11 in condizioni particolari (se vuoi te le descrivo separatamente) ma non con Chrome, comunque ho risolto con:
    $(_img).load(function(){ …
    tu hai già provato?
    grazie ciao :-)
    Andrea

  3. Massimiliano Balestrieri
    Posted 21 December 2010 at 10:38 | Permalink

    Ciao Andrea,

    su opera 11 avevo notato un altro problema (legato a visibility e fadeOut sostanzialmente). Ora mi sembra funzionare correttamente. Spiegami nel dettaglio il problema che tu hai incontrato.

    su chrome ho trovato proprio una peculiaretà. Se tu carichi (diciamo cliccando su due thumb) la stessa immagine (stesso url) due volte, la seconda volta non scatta l’evento load. E il mio engine si basa completamente sull’evento load dell’immagine.

    http://code.google.com/p/chromium/issues/detail?id=7731

    E’ una situazione che non dovrebbe capitare mai. A me è capitata perchè facendo test, mi capita di mettere due volte la stessa immagine. Testando l’api mi capita di iniettare due volte la stessa immagine/url.
    Di fatto ho risolto esattamente come in ajax si evita la cache. Mettendo un timestamp attaccato all’url (solo se l’immagine precedente è uguale, altrimenti mi giocherei la cache del browser).
    Invece di attaccare all’url il timestamp con il classico ? ho usato # (Picasa altrimenti non mi serve le immagini.
    Al momento quindi l’hack del #timestamp evita questo problema su chrome… che cmq ripeto non dovrebbe praticamente mai avvenire (nemmeno su slideshow randomizzato – c’è un controllo sul metodo go).

  4. yitian
    Posted 31 December 2010 at 17:43 | Permalink

    sasa

  5. Lorraine Honet
    Posted 9 January 2011 at 01:41 | Permalink

    Hello Massimiliano,

    First off all thank you for this code. I’m a beginner in javascript and jquery and your explanations helped me very well. But I have a problem with your code for the feedback form. In my case I need a form who will give the opportunity for people to send me a message to my email address. I think I just need to change the action of this:

    jQuery(“pre”).attr(“name”,”code”);
    dp.SyntaxHighlighter.HighlightAll(‘code’);
    jQuery(‘#feedback’).contactable({
    action : ‘/blog/wp-comments-post.php’,
    });

    but I don’t know how to write the new action.

    Maybe I abuse but please, Is it possible for you to help me with this?

    Sorry for my english, I speak french and I hope you will understand my message.

    Thanks in advance :)

    Lorraine

  6. Massimiliano Balestrieri
    Posted 9 January 2011 at 11:31 | Permalink

    @lorraine

    no Lorraine.
    I’m sorry but “feedback” is another plugin, that I’ve modified for my blog.
    Use original and not modified plugin “jquery contactable”.
    “Contactable” send an email as you require.
    And this

    jQuery(“pre”).attr(“name”,”code”);
    dp.SyntaxHighlighter.HighlightAll(‘code’);

    cut it away.
    bye max

  7. Lorraine Honet
    Posted 9 January 2011 at 16:48 | Permalink

    Cool I found it! I will try to adapt it. Thank you very much ;)
    ciao ciao

  8. Eric
    Posted 19 January 2011 at 06:25 | Permalink

    This is very cool, but there is no way to set it to numbers and not have the (prev, next, info) buttons on this version. I tried modifying the js a bit so it didn’t append these pices in the numbers menu, but then the selected tab always ads 1to what is actually selected, and it always ads an extra li at the end of list, so it’s adding one and I can’t get this to not count one ahead when the prev, next, and info are not appended. Any help would be appreciated. Thanks.

  9. Massimiliano Balestrieri
    Posted 19 January 2011 at 08:42 | Permalink

    If I understand it, something like this?

    http://maxb.net/scripts/jbgallery/docs/temp/_eric.html

    bye max

  10. cyprien
    Posted 22 January 2011 at 06:21 | Permalink

    hi , i’m using your gallery with slider menu and i’ts so nice for the eyes :)

    but a little thing annoy me :
    the slider menu come on the top of my picture and it hide a part of this picture. I’m a photographer , and seeing my picture cutted this way is not very cool…

    is there a way to put the silder under the pictures ???

    sorry for my bad english
    i’m french….

    i hope you can answer me really soon!

  11. Massimiliano Balestrieri
    Posted 22 January 2011 at 12:56 | Permalink

    @Cyprien

    I’m sorry, but at the moment the gallery works like this.
    the slider came later.
    and the photo had to be at full screen
    in the next version I will try to separate the slider from the photo.

    bye max

  12. fabio
    Posted 28 January 2011 at 11:55 | Permalink

    Ciao Massimiliano, complimenti per la galleria. Fatta molto bene e molto utile. A prest. fabio

  13. Diego
    Posted 31 January 2011 at 20:59 | Permalink

    Ciao,

    arrivo da http://www.graphpaperpress.com dove molti utenti del forum di supporto si chiedono la seguente cosa…senza avere risposte risolutive:

    - è possibile avere un fade da immagine su immagine, cioè senza passare per la “schermata nera”?

    Grazie, bel lavoro!!

  14. Chris
    Posted 2 February 2011 at 01:03 | Permalink

    Max:

    Question: On the fullscreen demo: http://maxb.net/scripts/jbgallery/
    How do I make the large opaque content area (not the caption) on the right?
    What’d you use? That looks great.
    Thanks in advance

    Chris

  15. Massimiliano Balestrieri
    Posted 2 February 2011 at 09:22 | Permalink

    @Chris

    Open firebug or chrome inspector.

    #docs .cnt {
    background: url(http://maxb.net/scripts/jbgallery/img/opacity.png) repeat;
    }

    Is this your question?

    Bye max :)

  16. Massimiliano Balestrieri
    Posted 2 February 2011 at 09:36 | Permalink

    @Diego

    Ciao Diego, non sono riuscito a vedere questo forum. Mi sa che il supporto li è a pagamento :)
    Cmq… molto rapidamente. Per avere una transizione tra due immagini, o faccio un altro esempio, per avere un’animazione tipo slider orizzontale tra due immagini, ci vuole una certa struttura html, e certi stili css.
    Questa gallery nasce con una struttura html particolare. Alla fine, devo dire, limitante. Tutto nasce dall’aver visto un giorno questo sito:
    http://www.ringvemedia.com/

    Lo zoom di quella foto è data da una certa combinazione di stili e struttura html. Funziona egregiamente su firefox (e i suoi derivati). Gia con i webkit funziona solamente su foto portrait, su foto landscape l’altezza va fixata. Su explorer non ne parliamo.

    Siccome la gallery è nata per fare da “sfondo”, mi sembrava una buona idea insistere su questa struttura. Oggi non lo rifarei. Cambierei quella struttura (table, tr, td, hack css più che stili css comprensibili).

    Vedendo uno script semplice (a livello di righe di codice) come supersized o altri che fanno la stessa cosa, ho scoperto che per dimensionare un’immagine sullo sfondo di una pagina bastavano 3 righe di js.

    E senza questa struttura html barocca, sarebbe più semplice (probabilmente) implementare una transizione tra due immagini, o uno slider orizzontale/verticale.

    Per concludere, direi quindi che, ancora per questa versione 3.0, implementare una feature del genere mi sembra difficile. (non so letteralmente se sia possibile)

    Per la versione 4.0 se avrò il tempo di farla, questo tuo commento è sicuramente un buon punto di partenza.
    Rifattorizzare il markup della gallery per permettere transizioni, o animazioni tra due o più immagini.
    A quel punto ci si potrebbe sbizzarrire nel portare dentro le funzioni più assurde tipo questa

    http://tobia.github.com/CrossSlide/

    Ciao Max

  17. Gdub
    Posted 4 February 2011 at 22:37 | Permalink

    My images will not work with the gallery. Is there a size limit? Thx

  18. Massimiliano Balestrieri
    Posted 4 February 2011 at 23:18 | Permalink

    @Gdub

    could you please send me a link with a demo about your problem?

  19. saki
    Posted 8 February 2011 at 14:44 | Permalink

    thank you for your brilliant gallery;
    i have one question.
    i want to have a function to hide or show #docs block like ver.2.
    could you tell me how to do this function in ver3.
    thanks in advance.

  20. Gu
    Posted 9 February 2011 at 03:45 | Permalink

    Great work! I have made a very useful toolkit based on your great work. Check it out here:
    http://meisaslide.wordjp.com/project/intro.html

  21. Massimiliano Balestrieri
    Posted 9 February 2011 at 08:53 | Permalink

    @saki

    add a link in your page 

    <a href="#" id="mytoggle">toggle</a>

    then:

    $("#mytoggle").click(function(){
   $("#docs").toggle();
   return false
});

    bye

  22. Adrian
    Posted 9 February 2011 at 18:52 | Permalink

    Hi,

    With this new version, would it be possible to have a fullscreen button which toggles between ‘box’ mode and fullscreen. I assume I may need to write some basic JS that caches the image number, reinitalises, then skips to the cached image number.

  23. Massimiliano Balestrieri
    Posted 10 February 2011 at 08:51 | Permalink

    @Gu

    Bello :)

  24. Massimiliano Balestrieri
    Posted 10 February 2011 at 08:57 | Permalink

    @Adrian

    Interesting idea. I don’t understand what do you mean by “cache” image.
    Try toggle “jbox” class from container, and unset width/height.
    Try and let me know.

    Bye Max

  25. tania
    Posted 10 February 2011 at 12:38 | Permalink

    hi
    i need a slideshow.
    i’d like to know, is yours JBGALLERY, free or not ?
    thanx ! :)

  26. Massimiliano Balestrieri
    Posted 10 February 2011 at 13:26 | Permalink

    @tania

    Free like a bird :)

    * Licensed GPL licenses:
    * http://www.gnu.org/licenses/gpl.html

  27. alfredo
    Posted 13 February 2011 at 19:57 | Permalink

    Non mi funziona (e sto impazzendo) style=”original” con explorer, lo visualizza come se avessi messo “centered” …. help me

    Grazie mille in anticipo e complimenti per la gallery

  28. Massimiliano Balestrieri
    Posted 13 February 2011 at 21:22 | Permalink

    @Alfredo

    Ciao Alfredo, mi puoi linkare una demo con il problema?

    ciao max

  29. Massimiliano Balestrieri
    Posted 14 February 2011 at 09:13 | Permalink

    @Alfredo

    prova questo:
    http://maxb.net/scripts/jbgallery/docs/debug/test.html

    e in ogni caso sulle tue foto prova a usare questa versione:
    http://maxb.net/scripts/jbgallery/jbgallery-3.0.test.js

    mi fai sapere?
    grazie e ciao Max

  30. GDub
    Posted 22 February 2011 at 00:47 | Permalink

    Fixed the image problem. Thanks. How can I turn the menu completely off. I do not want the user to control the slide show. Also, how do I make the first image random but go in order after the first image and never show the same image right after. Thanks,

  31. Massimiliano Balestrieri
    Posted 22 February 2011 at 08:45 | Permalink

    @GDub

    1) css or option menu : false
    2) option randomize : 1 (only first image)

    bye max

  32. GDub
    Posted 22 February 2011 at 19:08 | Permalink

    Still not working. Still showing the same image twice in a row. The menu is still visible.

    style : “centered”,
    menu : “false”,
    shortcuts: [37, 39],
    slideshow: true,
    fade : true,
    popup : false,
    randomize: 1,
    caption : false,
    autohide : false,
    clickable: false,
    current : 1,

  33. Nathaniel
    Posted 28 February 2011 at 15:33 | Permalink

    Hi, wonderful job on this plugin. Just wanted to find out if this plugin would be usable on as on the site http://www.barrygoldmanphotography.com but in the gallery section. The current Jquery gallery does not give me the ability to stretch the images and keep the thumbnails option. How would i display the thumbnails with an exit thumbnails option or change the view of the thumbnails is it 100% css driven?

  34. Joseph Brennan
    Posted 3 March 2011 at 06:19 | Permalink

    The jbgallery script does exactly what I want it to do under Firefox, IE and Safari; however, a friend just pointed out to me that there is a problem when viewed through Google Chrome. Instead of starting the slideshow automatically, a black screen appears and the user has to intervene by clicking “next” to get things started. I’m not sure if this is a bug, or have I left out some snippet of code that will make it work under Chrome?

  35. Massimiliano Balestrieri
    Posted 3 March 2011 at 08:37 | Permalink

    @Josheph

    I noticed that Chrome doesn’t fire load event when the image is cached. It may be that. If you can reproduce the bug I can try to do something.

    Max

  36. GU
    Posted 4 March 2011 at 11:53 | Permalink

    Hi Max:

    Had some problem using the lib in none full screen mode. need your advice and help.

    I had tested below link
    http://maxb.net/scripts/jbgallery/docs/jbox/test_jbox.html
    And find that in none fullscreen mode, I always had some white margin on the left and top of the slider, do you know how to make slider fully aligned to top and left of the browser window? I tried on safari and firefox, same result.

    Thank you!

  37. JeffyJaz
    Posted 4 March 2011 at 15:23 | Permalink

    Hey yo!
    Man .. I have a problem;
    I’m using a flash simple animation with JB Gallery javascript .. they are in conflict :S
    everytime that a image is loaded.. my flash animation loop!
    over and over again.
    can you tell me why?
    thanks.. i luv this plugin that u made.

  38. Yoko
    Posted 10 March 2011 at 02:24 | Permalink

    This is one of the best gallery plugins I have come across.
    I would like to know if its possible to include a fullscreen option such as that found in flickr slideshow, bottom right? How can i include such an option – I believe flash will be needed but is it possible to include that in this?

  39. Kelso
    Posted 12 March 2011 at 23:49 | Permalink

    I want to use this gallery as part of a site masthead.
    Can I set the size of the gallery? If so, how?
    Also, regardless of called image size, I need to constrain the image size so they always show complete within the gallery area.

    Many Thanks in advance

  40. Massimiliano Balestrieri
    Posted 13 March 2011 at 11:40 | Permalink

    @Gu

    html,body{margin:0;padding:0;}

    @JeffyJaz

    I don’t know.

    @Yoko

    Thanks. Modern Browsers don’t allow trigger F11 press via javascript. Flash is a world apart.

    @Kelso

    I published many demos.
    http://maxb.net/scripts/jbgallery/docs/debug/test.html (FULLSCREEN)
    http://maxb.net/scripts/jbgallery/docs/jbox/test_jbox.html (BOX)
    try toolbar on the bottom of the page.

    Bye Max

  41. Jesse
    Posted 24 March 2011 at 10:29 | Permalink

    Hi Max,

    I it possible to fade images directly into eachother? It now shows a second of black in your demo.

  42. Jamieson
    Posted 20 April 2011 at 03:13 | Permalink

    This is a great utility and thank you for open sourcing it!!! Is it possible to license it under BSD, MIT, or LGPL licenses? Right now, it is not possible to use it in commercial applications without licensing the entire application under the GPL.

  43. Aldo
    Posted 27 April 2011 at 19:15 | Permalink

    Comments are closed for jbgallery 2.0 and I just bought a template at TemplateMonster that uses your script with the jbgallery 2.0 BETA – RC2 version.

    Here’s the demo:
    http://esquisun.com/hotel/

    The pictures are TOO zoomed. Please provide me some guides in order to make them as normal as possible. I don’t know if I have to change something in the CSS, the JS, the image size or maybe all of them.

    CSS URL
    http://esquisun.com/hotel/templates/maria-agustina/css/jbgallery-2.0.css

    JS URL
    http://esquisun.com/hotel/templates/maria-agustina/scripts/jbgallery-2.0.js

    As you can see, it’s a Joomla template so I don’t know if there’s going to be a pain if I update to 3.0, I rather stick with 2.0 and accept any advice you can give me.

  44. Massimiliano Balestrieri
    Posted 28 April 2011 at 14:02 | Permalink

    @Jamieson
    At the moment the license is GPL.
    Sorry

    @Aldo
    Try
    http://maxb.net/scripts/jbgallery/docs/temp/_esquisun_1.html (style : “original”)
    http://maxb.net/scripts/jbgallery/docs/temp/_esquisun_2.html (style : “zoom”)
    http://maxb.net/scripts/jbgallery/docs/temp/_esquisun_3.html (style : “centered”)

    In these demo I use version 3.0 of the script.
    I hope it will be useful.
    Bye Max

  45. Rick
    Posted 2 May 2011 at 00:48 | Permalink

    Great script!
    When using the slider menu option. Is there a way to specify a different thumbnail size? I can manually change it via CSS but then the thumbnails are not centered within the containing DIV.

  46. CoXx
    Posted 4 May 2011 at 18:20 | Permalink

    Great Script!
    and one question, how can i add a link to toggle the thumbnails behind the info button?

    pls answer :)

  47. Massimiliano Balestrieri
    Posted 4 May 2011 at 18:43 | Permalink

    @rick

    no Rick. I’m sorry. At the moment the slider with thumbnails and animations have sizes, padding, margins in the js. I know, it isn’t a great choise… :(

    @Coxx

    You have to use option autohide:true or, add a new html element to dom and write the jQuery code in order to toggle the visibility of slider, it’s quite simple.

    bye max

  48. Lars Borup Jensen
    Posted 13 May 2011 at 07:52 | Permalink

    I have a problem where I’ve used jbgallery to randomly choose a background image from a list of, lets say 5 images. No fade or transition, just choose one image at random and display it, but every so often it just displays nothiing, but the normalt HTML – no image is loaded.

    I have a URL where you can see the page if you want!

  49. Kyle
    Posted 16 May 2011 at 07:10 | Permalink

    This looks like a great way to get what I wanted done. I’m running in to an issue though with the slider bar and text displaying outside the gallery container.http://dev.mykeepsakephotography.com/gallery_couples.php

    I am looking for pretty much the same results that you have on the jbgallery demo site. http://maxb.net/scripts/jbgallery/ with it contained in a div. Did you have to alter the CSS to get the slider within the div container?

    Thank you,
    Kyle

  50. Massimiliano Balestrieri
    Posted 16 May 2011 at 21:00 | Permalink

    @Lars

    Thank you Lars. It was a bug of randomizer function. I’ve fixed.
    Please update the script (REV 54):
    http://maxb.net/scripts/jbgallery/jbgallery-3.0.beta.zip
    http://maxb.net/scripts/jbgallery/jbgallery-3.0.js
    http://maxb.net/scripts/jbgallery/jbgallery-3.0.min.js

    Bye Max

  51. Massimiliano Balestrieri
    Posted 16 May 2011 at 21:11 | Permalink

    @Kyle

    Sorry, but you have to use one of my examples as starting point.
    Otherwise I can’t help you easily.

    Bye Max

  52. Shrimpy
    Posted 18 May 2011 at 14:58 | Permalink

    Hi Massi, Great work, well done, love it. But maybe you can help me with IE. The menu at the bottom is missing in IE and the link normally on the left moved to the right where the menu should be……. Any ideas ?????????? Your help would be fully apreciated.

  53. Tomek
    Posted 18 May 2011 at 15:25 | Permalink

    Hello!

    I have small problem in FF(Safari and Chrome are working fine).
    When I put image bigger(1920/1200)than my screen resolution(1680/1050), image won’t scaling down. I’ll be very thankful for your help :)

  54. Massimiliano Balestrieri
    Posted 19 May 2011 at 08:03 | Permalink

    @Tomek

    It doesn’t happen to me.
    http://maxb.net/scripts/jbgallery/docs/debug/test.html
    I tried 3000×2000 2000×3000 3000×3000 (link at bottom) in resolution 1280×1024 and 1900×1200.
    Style : centered (not zoom).

    I tested in Firefox 3.6 – Firefox 4

  55. Massimiliano Balestrieri
    Posted 19 May 2011 at 08:08 | Permalink

    @Shrimpy

    Hi Shrimpy, thanks for the compliments. what version of IE? Could you publish a demo that show me the problem?

    bye
    max

  56. Shrimpy
    Posted 20 May 2011 at 11:56 | Permalink

    hi max, thanks for getting back so quick. IE9 seems to be the problem. The menue/nav normally found at the bottom right is gone and replaced with the link that normally sites on the left side. Firefox, Safari are ok and IE8 is ok also. I’ll try to get a demo up for you to see as soon as possible unless you know already what the problem is. Probably needs a IE9 hack? Anyway thanks for your help. Would be magic if you can help me solve this.

  57. sprut
    Posted 20 May 2011 at 18:53 | Permalink

    how disable labels menu? (play : “play”,
    next : “next”,
    prev : “prev”,
    stop : “stop”,
    close: “close”,
    info : “info” )

  58. Massimiliano Balestrieri
    Posted 20 May 2011 at 19:02 | Permalink

    @sprut
    What do you mean for “disable”?

    Do you want to use icons instead of text? use css property 

    text-indent:-9999px

    and then set the background via css. It’s simple.

    Otherwise… Do you want to hide the menu?
    Use option 

    menu : false

    Otherwise… I didn’t understand. sorry

    bye max

  59. CoXx
    Posted 21 May 2011 at 10:24 | Permalink

    Quote/

    @Coxx

    You have to use option autohide:true or, add a new html element to dom and write the jQuery code in order to toggle the visibility of slider, it’s quite simple.

    bye max

    /Quote

    Yeah easy for you :D
    i will test it ;)

  60. Florian
    Posted 2 June 2011 at 03:51 | Permalink

    Dear Massimiliano,

    Great Plugin, I’m going to use it for my next project. Just wanted to tell you (My customer being very concerned with cross browser compatibility) that it perfectly runs on Android 3.0 (Optimus Pad). I’m going to test it on iPad tomorrow.

    Cheers,

    Florian

  61. Glen
    Posted 8 June 2011 at 12:37 | Permalink

    Thank you very much Massimiliano Balestrieri. A great script Looks cool. I want to add lightbox plugin with the jbox. Or can i toggle the gallery in between fullscreen and jbox.??

  62. Massimiliano Balestrieri
    Posted 8 June 2011 at 12:48 | Permalink

    @Glen

    Try and let me now :)

    hint:
    http://maxb.net/scripts/jbgallery/docs/jbox/test_jbox.html
    try with firebug to toggle class jbox in div#test (and fix margin/padding of body/html)
    it seems to work easily

  63. Anna
    Posted 9 June 2011 at 15:21 | Permalink

    Hi there!

    Love the gallery, – grazie! Unfortunately I experience a minor problem: if I switch back between full slideshow and any other page of the website it sometimes (only sometimes) happens that a black box with the captions appears for half a second in the background while the first image is loading…it only happens very rarely, but unfortunately doesnt look so nice!

    Any idea how this can be solved?

    Thank you!

  64. Massimiliano Balestrieri
    Posted 9 June 2011 at 15:47 | Permalink

    @Anna

    Can you write me a demo/link and steps to reproduce the bug?

  65. Keith
    Posted 13 June 2011 at 06:28 | Permalink

    This is a terrific script. I’m wondering how I could have the page load without the caption visible until the “Info” link is clicked. Also, how can I change the name of “Info” to “I”?

    Thank you for your help,
    Keith

  66. Massimiliano Balestrieri
    Posted 13 June 2011 at 07:59 | Permalink

    @Keith

    For label:
    http://maxb.net/scripts/jbgallery/docs/options/labels.html

    For the initial visibility of caption… try set .jbg-caption style via css (display:hide).

    max

  67. Keith
    Posted 13 June 2011 at 15:08 | Permalink

    Max,

    Thanks for the quick response. The label info solved that problem. I the css “hidden” option did not. It did hide the caption, but it doesn’t show the caption once I click the button.

    Here is the url, if it will help: http://www.gt.khcreativemedia.com

    Thanks again,
    Keith

  68. Keith
    Posted 14 June 2011 at 06:24 | Permalink

    Max,

    Still trying to figure this out. I should have mentioned the site I know this is working on.

    This page is hiding the caption on load and displaying once “info” is clicked: http://livedemo00.template-help.com/joomla_33451/index.php

    I want the same on this page: http://www.gt.khcreativemedia.com

    This is the code that seems be be doing it:

    var $j = jQuery.noConflict();

    $j(function()
    {

    $j(“#link”).click(function(event) {
    event.preventDefault();
    $j(this).toggleClass(“link2″);
    $j(“#top_menu”).slideToggle(“slow”);
    });
    })

    I have the same css on both sites for #link and #top_menu.

    Can you give me any advice?

    Thanks,
    Keith

  69. Anna
    Posted 14 June 2011 at 12:44 | Permalink

    Hi Massimiliano,

    The link to the website is http://uformiaworld.com/.

    When I for example click from any item in the footer menu back to home page, I see (only sometimes!) this black box with the captions appearing for half a second in the background while the first image is loading…

    Thanks for any tips!

    Anna

  70. Massimiliano Balestrieri
    Posted 14 June 2011 at 21:16 | Permalink

    @Keith

    I’m sorry for the delay :(
    I had all kind of problem with my hosting in last two days.

    however, here you are the solution:
    http://maxb.net/scripts/jbgallery/docs/caption/captionhidestart.html

    It’s a little hack. At the moment the script doesn’t manage this feature. In future I’ll add an option in order to hide caption at start (or if you want you can implement, it’s no too difficult)

    PS: your demo and your model have a very bad bug in chrome. The image doesn’t appear until you resize the window. I think is due of a conflict with some other script because I never saw this strange bug.
    Bye Max :)

  71. Massimiliano Balestrieri
    Posted 14 June 2011 at 21:39 | Permalink

    @Anna

    Ciao Anna,
    try this version and test it for me. If it’s bug free I commit the change and I release the fix for all.

    http://maxb.net/scripts/jbgallery/docs/temp/_uformiaworld.html
    http://maxb.net/scripts/jbgallery/docs/temp/test/jbgallery-3.0.test.js

    bye max

  72. Keith
    Posted 14 June 2011 at 21:45 | Permalink

    Max,

    Thanks for the info, although when I add the part of that script that I need, it breaks my site. Here is my code:

    I have it in place on the site at the moment, if that helps.
    http://www.gt.khcreativemedia.com

    Also, thanks for the heads up with the Chrome issue. I’ll see what I can figure out.

    Keith

  73. Keith
    Posted 14 June 2011 at 21:49 | Permalink

    Max,

    Also, as far as the Chrome issue, the demo site is build in Joomla and part of a template that my client wanted. My client wanted to use WordPress instead of Joomla, so I have been using the demo site as a reference and building a new site in WordPress. With that being said, it shouldn’t be a script conflict, I don’t think. Any other suggestions?

    Thanks,
    Keith

  74. Keith
    Posted 14 June 2011 at 23:15 | Permalink

    Max,

    OK, looks like I was missing a comma and now my problem is solved. Still not sure about the chrome issue, if you happen to want to look into that. Again, outstanding script. Really loving it.

    Keith

  75. Anna
    Posted 15 June 2011 at 09:22 | Permalink

    Dear Max,

    Thanks for your incredible fast reply! I tried your script on a temp site (thanks!), but unfortunately the problem is still persisting. I noticed that it happens much less on Firefox (hardly ever), but on Google Chrome/Safari it still happens when clicking back and forth between menu items and homepage (again not always, but it still quite frequent)…

    Anna

  76. manuel
    Posted 17 June 2011 at 11:35 | Permalink

    Hi Massimiliano.

    My site (joomla+jbgallery) was working fine on all browsers, but suddenly something happened in Chrome, please check it out and maybe you can give me a quick diagnose.

    Gracie!

  77. Massimiliano Balestrieri
    Posted 17 June 2011 at 11:56 | Permalink

    @Manuel

    Sorry Manuel, but your request is a bit vague.
    I saw your bug (image doesn’t appear… I think) in a recent comment in this post.
    I don’t know.
    What I can say to you is:

    1) try to update jbgallery. You have 2.0 in your joomla template.
    2) try to isolate the bug. Remove one library at once. For me is due of a conflict with some other script/function that works with images.

    I can’t do this work for you.
    Sorry Max

  78. Keith
    Posted 17 June 2011 at 17:34 | Permalink

    Max,

    Still curious if you have any suggestions to figure out my issue with Chrome. The demo site is using joomla and version 2.0 of the script. I am using WordPress and version 3.0 of the script. Any thoughts as to how I can attempt to discover the Chrome issue?

    Thanks,
    Keith

  79. Massimiliano Balestrieri
    Posted 17 June 2011 at 17:55 | Permalink

    @Keith

    this is my suggestion. Remove this rule:

    body, html{
	position:relative;
}

    in http://gt.khcreativemedia.com/wp-content/themes/Starkers/style.css

    bye max

  80. Massimiliano Balestrieri
    Posted 17 June 2011 at 17:57 | Permalink

    @Manuel

    Look at the last comment. Probably is useful to you too.

    bye max

  81. Keith
    Posted 20 June 2011 at 15:06 | Permalink

    Max,

    That was it, problem solved with Chrome.

    Thanks for you help,
    Keith

  82. Helen
    Posted 22 June 2011 at 21:39 | Permalink

    Hello,
    *really great work.

    I was wondering if it possible to fade from one photo to another instead of fading to black first. Thank you

  83. Massimiliano Balestrieri
    Posted 23 June 2011 at 09:30 | Permalink

    @Helen

    Sorry, at the moment it’s not possible.
    Max

  84. Massimiliano Balestrieri
    Posted 23 June 2011 at 10:05 | Permalink

    @Helen

    Sorry, at the moment it’s not possible.

  85. Juergen Buschbaum
    Posted 23 June 2011 at 21:46 | Permalink

    Very nice gallery concept. I use it for my website now as well. Thank you for your good work.

    Juergen

  86. Juergen Buschbaum
    Posted 23 June 2011 at 21:51 | Permalink

    A short questiojn: The feedback form uses a file called mail.php which is not part of the source code.

    Can you provide it to me please?

    THX

  87. Massimiliano Balestrieri
    Posted 24 June 2011 at 08:22 | Permalink

    @Juergen

    I think you’re looking for this http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html

    mail.php is in contactable plugin.
    http://plugins.theodin.co.uk/jquery/contactable.1.3/contactable.1.3.zip

    thanks
    bye max

  88. Gianluca
    Posted 24 June 2011 at 12:06 | Permalink

    Salve io non so se è il luogo giusto per chiedere un informazione su jbgallery 2.0.
    io ho un template che funziona con jbgallery, non essendo pratico di java script non so dove andare a parare, da quanto ho installato chrome versione 12 non funziona piu.le immagini non si visualizzano piu. ho solo installato chrome. Riesci ad indicarmi dove correggere il problema?

  89. gianluca
    Posted 24 June 2011 at 17:22 | Permalink

    sul mio indirizzo g88mt.altervista.org ho un problema con chrome in quanto jbgallery non funziona correttamente. fa sparire l’immagine invece su altri browser funziona correttamente.se lo visualizzi con chrome aggiornato te ne accorgi.
    Scusa se commento qui

  90. Massimiliano Balestrieri
    Posted 27 June 2011 at 10:41 | Permalink

    ciao Gianluca,
    non è un problema di jbgallery.
    E’ il css del template.
    Basta togliere position:relative a html,body (riga 684 – template.css)
    Ciao Max

  91. Nick
    Posted 2 July 2011 at 08:59 | Permalink

    thanks much–this is a really great gallery plugin, and I plan to use it in an upcoming project. I’m wondering though, is it possible to modify the js/css so that in the slider mode the top and lower bars do not overlay the image– i.e. so that no part of the large image is covered by the prev/next and thumbnail bars? perhaps by applying a margin to the top and bottom of the image? thanks for any assistance.

  92. Massimiliano Balestrieri
    Posted 2 July 2011 at 10:24 | Permalink

    @Nick

    It’s not trivial. Try to make a static mock-up without js and discover what’s to change in html/css of jbgallery structure.
    Then I can help you and change jbgallery.js.

    Bye max

  93. Nick
    Posted 2 July 2011 at 11:17 | Permalink

    hi Max– thanks for the response; I’ve just built a static mockup with the help of Firebug and it seems to be a bit over my head; I’m not sure how the width/height of the image within that main table– inside the “jbg-wrap centered” div– is being calculated; perhaps if fixed-height rows were added above and below and the image dims were calculated as 100% of the vertical space in between?

  94. Randall
    Posted 5 July 2011 at 22:01 | Permalink

    I know this is the wrong thread, but I can’t find any contact information on the site.

    I’m trying to implement ycodaslider 2.0, and I can’t adjust the height of the iframe – I’d like to make it something like 1000px high. Where can I change that?

    Thanks for making great products!

  95. jack
    Posted 6 July 2011 at 21:05 | Permalink

    Hi,

    Outstanding work. Thank you!!!

    I want the black translucent area to be slightly wider (no problem in css). But, I want it centered when the browser window is roughly 540 px wide.

    How do I do that?

    Cheers,

    J

  96. Roman
    Posted 7 July 2011 at 16:41 | Permalink

    jbgallery 3.0 is very interesting and has good functions. I see small, but the essential problem.
    If the image will be vertical, then in the large enlargement one can see only his fragment.
    Very necessary is in your jbgallery 3.0 the scalability of the large image ( mouse wheel – switch on/off zoom and mouse scroll of large images) like in ( click in the menu “GALLERIES”)
    Then, jbgallery 3.0 had that all necessary functions to the display of images ( vertical and horizontal).
    This would be the best. I’m going to use this gallery.
    Roman Z.

  97. Roman
    Posted 7 July 2011 at 16:59 | Permalink

    You can see as works this function ( mouse wheel – switch on/off zoom and mouse scroll of large images) here: http://www.romanzakrzewski.pl/flash/index.html
    ( click in the menu “GALLERIES”).
    Roman.

  98. Massimiliano Balestrieri
    Posted 8 July 2011 at 08:43 | Permalink

    Ciao a tutti,

    there you are some mockups of new jbgallery:

    http://maxb.net/scripts/jbgallery-4.0/mockup/01-base-fullscreen-slider.html
    http://maxb.net/scripts/jbgallery-4.0/mockup/02-base-box-slider.html
    http://maxb.net/scripts/jbgallery-4.0/mockup/03-base-fullscreen-fade.html
    http://maxb.net/scripts/jbgallery-4.0/mockup/04-base-box-fade.html
    http://maxb.net/scripts/jbgallery-4.0/mockup/05-base-fullscreen-fade-layers.html
    http://maxb.net/scripts/jbgallery-4.0/mockup/06-base-fullscreen-slider-layers.html
    http://maxb.net/scripts/jbgallery-4.0/mockup/07-base-box-slider-layers.html

    I want to implement these features:

    – transition (fade/slider), this means a complete refactory of markup/css
    – layers “out of the box” and not above the image

    secondly:

    – the bottom slider more configurable (thumbs size for example)

    if you have other ideas, write them down. If it’s possible this is the time.

    Bye Max

  99. Massimiliano Balestrieri
    Posted 8 July 2011 at 08:50 | Permalink

    @nick
    As you can see from the above comment I’m working on it.

    @randall
    ycodaslider is an old project. I’m sorry. Around there are very powerful slider.

    @jack
    if you explain it in detail and if it is useful I’ll develop it in version 4.0.

    @Roman
    It’s a very particular feature. I’ll think about it.

    @all
    thanks for the compliments. I’m glad you like it.
    bye max

  100. Nick
    Posted 8 July 2011 at 09:22 | Permalink

    hi Max– that’s great news; I look forward to the next version! I’ve spent an insane amount of time looking at various image gallery plugins and this has the potential to be the most full-featured one out there

  101. Roman
    Posted 8 July 2011 at 21:59 | Permalink

    I found another a link about the function (mouse wheel – switch on/off zoom and mouse scroll of large images)
    here: http://zoom.it
    Roman.

  102. Mirko
    Posted 9 July 2011 at 11:30 | Permalink

    Salve, vorrei sapere come installare e configurare jbgallery in joomla 1.5.22!! è urgentissimo! Grazie!!

  103. Massimiliano Balestrieri
    Posted 9 July 2011 at 12:01 | Permalink

    @Roman

    I had a look to zoom.it
    It’s very hard to implement, but above all, it’s very complex for the final user cuts the image like a map.
    Probably what you need is something like this
    http://openlayers.org/

    @Mirko
    Ciao Mirko, mi sembra vaga la tua domanda. jBGallery è un plugin jQuery. Non un template joomla. Se vuoi integrare in un tema di joomla, basta che includi i files js/css di jbgallery nel tuo tema, e inserisci nell’html il markup necessario.
    Spero di esserti stato utile.

    ciao max

  104. iluvhatemail
    Posted 11 July 2011 at 17:01 | Permalink

    currently I’m having issues with jbgallery hiding my logo. Seems like a simple issue, but I am still trying to figure out what’s wrong.

    if i put my header div before the slideshow, it briefly shows the logo and nav before fading and showing the first image, even though they are in different divs. If i put it after and add a id to the nav ul that shows up but the logo is long gone. Any clues?

    http://www.khachatouryan.com/staging/

    if you dont see the issue anymore it will be because i figured it out :D

  105. iluvhatemail
    Posted 11 July 2011 at 17:59 | Permalink

    i hacked it to fix it by placing the logo div inside the nav div. too noob to figure out why that worked and nothing else did

  106. iluvhatemail
    Posted 11 July 2011 at 20:03 | Permalink

    feels like i’m spamming but i’m not :)
    i am going to try and make a left/right half next/back overlay will share it if it works good, but just a suggestion for the next build.
    Thanks for the gallery, it works much better than the others i’ve tried and quick too.

  107. Massimiliano Balestrieri
    Posted 12 July 2011 at 08:25 | Permalink

    @iluvhatemail

    I appreciate your work very much.
    max :)

  108. Roman
    Posted 12 July 2011 at 12:17 | Permalink

    Hi,
    right now tests jbgallery 3.0. I’m going to use this jbgallery on my website. I have one question.
    Is there a possibility of the manual settings of function (autohide (the menu slider) by the click( eg. show the menu, hide menu)? This choice function would be a very good thing.
    Roman.

  109. Massimiliano Balestrieri
    Posted 12 July 2011 at 15:57 | Permalink

    @Roman

    Hi Roman, try this, and customize it.
    http://maxb.net/scripts/jbgallery/docs/menuslider/toggleslider.html
    bye max

  110. Roman
    Posted 12 July 2011 at 23:06 | Permalink

    Hi,
    thank you. It’s now, this function (TOGGLE SLIDER) is very good.
    Roman.

  111. Gary Ngui
    Posted 14 July 2011 at 05:57 | Permalink

    I was wondering if we can have 2 different styles ( such as “zoom” and ” centered” ) fit into the gallery in the same time ? Any thoughts ?

    My main problem is the images with landscape size stretch perfectly, but for images with portrait ( length more than width ), it does not show the entire image due to the length. Any recommendations ? Thank you very much.

  112. Massimiliano Balestrieri
    Posted 14 July 2011 at 08:20 | Permalink

    @gary
    could you please send me a link with a demo about your problem?

    max

  113. Letícia
    Posted 14 July 2011 at 19:42 | Permalink

    Hi,
    I want to show a number specific, for example five images, on the thumbs part, How can I do this?

    Thanks

  114. Matt
    Posted 15 July 2011 at 19:45 | Permalink

    I’m trying to use your image gallery. I used it a while back and it seemed to work fine. Using the newest versions of jquery it doesn’t seem to do full screen well. it draws the image thumb bar incorrect and the label buttons don’t show up in the top right unless im make my window really small.

  115. JOLIVET
    Posted 17 July 2011 at 18:13 | Permalink

    Hello !
    Thank you for your very nice js gallery !
    I try to use it on my website but can’t find how to use the close function.
    Here is what I write on my html file :

    Could you please tell me what’s wrong ?
    I’m using this file : jbgallery-3.0.min.js

    Thank you again !
    Nice job !

  116. marcods
    Posted 18 July 2011 at 14:03 | Permalink

    ciao,
    sto usando la tua gallery e mi pare proprio ben fatta! l’unica cosa che non riesco a risolvere è come fare perchè le immagini si riducano per rientrare nello schermo in caso di visualizzazione con basse risoluzioni.. tipo che un’immagine alta 1000px sia visibile ridimensionata da chi ha la risoluzione alta 768.. è fattibile?

    grazie/ciao

    Marco

  117. Dan Gericke
    Posted 19 July 2011 at 02:59 | Permalink

    Hi,
    I was wondering how to disable the use of the shortcuts so they are released to the user. I tried the following: shortcus: false, which actually does unbind my left and right arrow keys from the gallery, however I think I should also be able to use my arrow keys to scroll up and down in my website, but I can’t. Even inside of a text box I can’t use my arrow keys to move around inside my text.
    Is the gallery also stopping those keys from performing the normal function?
    Thanks,
    -Dan

  118. Outre
    Posted 20 July 2011 at 11:38 | Permalink

    Hi Max. Love the gallery but am having a very strange problem.

    When a page with the gallery on it loads with fullscreen: false set everything looks fine initially. The first image and the thumbnail bar displays as it should. But when trying to move to the next image the height of the gallery collapses to about 15px high,and i can only see the bottom few pixels of the thumbnails, the “Prev”/”Next”/”info” links. Refreshing the page shows the first image just fine.
    I have removed all other javascript libraries and css files in an effort to remove conflicts but with the same result. Loading gallery with fullscreen: true works without any problems.

    Do you have any suggestions?
    Thanks in advance.

  119. Massimiliano Balestrieri
    Posted 20 July 2011 at 12:41 | Permalink

    @Outre, All

    Ciao
    Now I am busy, and this weekend I’m going on vacation for two weeks.
    I think I can not help you in the coming days
    Sorry Max :(

  120. Sam
    Posted 1 August 2011 at 13:59 | Permalink

    Hi,

    This is really a wonderful API.

    Can you help me get a magnifier, so that I can zoom particular area of image??

    Thanks in advance.
    Sam

  121. Germán
    Posted 3 August 2011 at 17:58 | Permalink

    Hi Max! Great plugin! Thank you! i’m trying to make it work like this http://maxb.net/scripts/jbgallery/docs/advanced/links.html but I can’t, this is the code I’m pasting in my page:

     jQuery(document).ready(function(){
        var _href = false;
		var _obj = jQuery("#fullscreen").jbgallery({
			after : function(){
				_href = jQuery("#fullscreen").find("li").eq(_obj.current() - 1).find("a").attr("rel");
				jQuery(".jbgallery-target")
				.css({
                    cursor : _href ? "pointer" : "auto"
                });
			},
			ready : function(el){
				jQuery(".jbgallery-target", el)
                .click(function(){
                    if(_href)
                        location.href = _href;
                    return false;
                });
			}
		}, true);
	});

    Am I doing it wrong?
    Thank you in advance!

  122. Rick
    Posted 10 August 2011 at 16:58 | Permalink

    Ciao Max,
    great script. I do have a couple of points, not very important but if you have a fix I’ll greatly appreciate it. 1) The randomize doesn’t always work. It will sometimes show the same slide twice. (using latest version)
    2) When randomize is active, the slideshow will stop playing in Safari after a couple of minutes.
    Thanks in advance.

  123. loyerman
    Posted 13 August 2011 at 03:55 | Permalink

    muy bueno.!

  124. Mino
    Posted 14 August 2011 at 15:19 | Permalink

    Hi, many thanks for great plugin. I have little problem with Android browser. Browser can’t scroll page. I think it’s because Android takes CSS “overflow: auto” and “overflow: scroll” as “overflow: hidden”. I tested it on Android 2.3. Problem can also be seen on your demo site.

    But I found that page: http://yum.pixelpointcreative.com/wine-list.html which use your script and works OK. Can you find out which piece of code causes that?

    Thank you.

  125. Jack
    Posted 17 August 2011 at 22:19 | Permalink

    Hi,

    Great script-

    Is it possible to adjust the menu at the top of the page (prev next stop info)?

    I simply want to have a pause icon that becomes a play icon on clicking but cannot seem to find the source for this menu to strip out the prev, next and info links as well as set the pause/play bg css.

    Thansk

  126. Keith
    Posted 17 August 2011 at 23:40 | Permalink

    Max,

    The script is working beautifully on my clients site, but I have one small issue. I have the numbers for the slides set to “nothing” in the script, yet they show up for a couple of seconds during page load on slower connections. Is it possible to prevent this all together?

    Thanks,
    Keith

  127. Jack
    Posted 19 August 2011 at 00:38 | Permalink

    I am trying to use the play/pause functionality using images instead of text – is this possible?
    How do I implement it in the code – I assume through the css but cannot seem to get it working!?
    Thanks in advance
    Jack

  128. ramandeep
    Posted 19 August 2011 at 06:27 | Permalink

    Hello,

    this is giving problem of black screen and when we refresh or click on next it works fine.

    will you please give me the solution for this as this is the main problem of my site.

    Thanks and regards,
    Ramandeep singh

  129. Geoff
    Posted 20 August 2011 at 02:34 | Permalink

    Hi, I am building a site using a template I have bought. The template runs jbgallery 2 which is fabulous. The problem I have is that the css supplied does not rescale the photographs in different screen resolutions or if the browser window is reduced. Can you suggest a fix for this as nothing I have tried has worked. Many thanks.

    This code works only in Firefox and Opera:

    .jbgallery div {background: none repeat scroll 0 0 #000000;position: absolute;}

.jbgallery img.zoom {height: 100%;position: fixed;width: 100%;}

    This is the original supplied css which does not resize or rescale the image:

    html.loading{background:#000;}
html.loading *{visibility:hidden;}

html.jbg a{outline:none;}

html.jbg,body.jbg,.jbgallery,.jbgallery table,.jbgallery td{background:#000;font-family:FreeSans,Arial,Helvetica,sans-serif;width:100%;height:100%; margin:0;padding:0px;}
/*html.ie6{overflow:hidden;}*/

.jbgallery div{position:fixed;width:200%;height:200%;top:-50%;left:-50%;background:#000;}
html.ie6 .jbgallery div{position:absolute;}

.jbgallery td{vertical-align:middle;text-align:center}
.jbgallery img{margin:0 auto}
.jbgallery img.zoom{min-height:50%;min-width:50%;}
.jbgallery img.centered{min-height:auto;min-width:auto;}

/*CENTERED*/
#jbg.centered{position:static;width:auto;height:100%;}

/*CENTERED MODAL*/
#jbg.modal{position:absolute;width:200%;top:0;}

/*LOADING*/
#jbg-loading{position:absolute;width:100%;height:100%;z-index:1000;display:none;}
.jbg-loading{margin:auto;background:transparent url("../images/ajax-loader.gif") no-repeat scroll 50% 50%;height:100%;width:100%;border:4px;display:block;}

/*OPTIONAL CONTENT AND MENU -&gt; customize this */
#jbg-content{top:0px;left:0px;position:absolute;font-size:11px;z-index:1000;width:100%;height:100%;overflow:auto}
  130. Dave
    Posted 23 August 2011 at 18:54 | Permalink

    Is it possible to put a flash .swf component on top of the jbgallery background?

    When attempting to incorporate the 2, the flash component isnt visible……

    Thanks – great script by the way!

    Dave

  131. Sean Gallagher
    Posted 15 September 2011 at 23:25 | Permalink

    I’m having some issues with JBGallery causing interaction with some other elements on my site.

    I’m running my own thumbnail scroller as an experiment, and for some reason when I click the link, it works, but the thumbnail scroller also fades in and out with the gallery main image. Which I don’t want.

    The file is located here : http://dluxstudios.com/11 Any help would be greatly appreciated.

  132. Manuel
    Posted 17 September 2011 at 17:40 | Permalink

    Ciao Max,
    hai sviluppato una soluzione spettacolare!

    Sto strutturando il mio sito web composta di più gallery tra le quali una “video”, mi chiedevo come implementare un filmato hostato su Vimeo al posto di una delle immagini di background.

    Ho fatto diversi tentativi ma nulla.

    Forse, nonostante la perfetta funzionalità dello stesso, non è la migliore soluzione per i video hostati altrove?

    Grazie mille!

    Manuel

    P.S.: eventualmente posso tenere i filmati nella root del mio sito se l’implementazione dall’host esterno tipo Vimeo fosse eccessivamente problematico.

  133. Sam
    Posted 22 September 2011 at 14:16 | Permalink

    Hi,

    This is a great library for gallery view of images.

    Can you add two more feature?
    1) zoom on mousewheel or thru any button.
    2) Image rotation as images are not always in proper shape.

    Thanks in Advance.
    Sam

  134. Moita
    Posted 22 September 2011 at 20:26 | Permalink

    Hey, Max!
    Great work! I’ve been looking for this for a long time!

    I wonder if you could help with a modification.
    How can i substitute the “next”, “prev”, “stop”, “play” for customized buttons?

    Thank you!

    Moita

  135. JW
    Posted 24 September 2011 at 09:20 | Permalink

    Nice piece of work, but Safari 5.1 on Mac freezes often while scrolling.

  136. Shrimpy
    Posted 6 October 2011 at 13:40 | Permalink

    Hi Max!!, Am not a contact form expert sadly. Can you give me a few tips on which code i need to look at/change to get it to send to the mail address of my choice. Would save me a headache!!
    Thanks

  137. David
    Posted 12 October 2011 at 18:14 | Permalink

    Hi Massimiliano.

    Great Job! Would like to know, is there a way I can disable the black background , so that my web page’s original background would be behind the images?

  138. Alfonso
    Posted 19 October 2011 at 14:14 | Permalink

    Hi, Can you show me a joomla template whit jbgallery?
    thanks

    Salve a tutti. Potreste indicarmi un template per joomla che contiene jbgallery?
    grazie

  139. Alfonso
    Posted 19 October 2011 at 20:20 | Permalink

    Buonasera, stò provando la vostra gallery in locale, complimenti mi piace molto.
    Non ho capito una cosa, posso settarla in modo che la dissolvenza avvenga tra le 2 immagini e non nel nero?
    grazie anticipatamente.

  140. Dimitri
    Posted 9 November 2011 at 16:52 | Permalink

    Hi Massimo,

    Thanks you for a great script and some good functions.

    I have one request to make that I think would really benefit.

    Would you kindly provide a “cross-over” fade between the current image and the next?

    At the moment the current image fades to nothing, then the next image fades in. I have seen how much more “professional” a photo to photo transition looks and think it would complete this great script.

    Many thanks and I hope this is an included idea in your next update. Bravo!

  141. Designing Studios
    Posted 22 November 2011 at 19:06 | Permalink

    Hi jbgallery is a wonderful plugin i should agree with it and we are using this for one of our project and we have a issue that needs to be discussed with you. We are using this for a gallery having prev & next at the same time we need to show 1/13 for first slide and 2/13 for second slide. Where 1st number is slider number 2nd number is total number of slides. Can you please help us…

2 Trackbacks

  1. By jbgallery 1.0 – (function() { on 19 December 2010 at 20:48

    [...] jbgallery 1.0 03.30.09 | 50 Comments ATTENTION : jbgallery 3.0 BETA [...]

  2. By jbgallery 2.0 BETA – (function() { on 19 December 2010 at 20:49

    [...] })(); Skip to content jQuery Google Charts « Markerclusterer clearMarkers jbgallery 3.0 BETA » [...]