Matteo Bicocchi’s Blog

mb.ideas.repository

jQuery (mb)Gallery 1.5 (new!)

with 102 comments

mbgallery

Here it is. A super clean photo gallery!

A full featured photo gallery, with navigation toolbar, thumbnails, autosize frame.

go to the component page: http://pupunzi.open-lab.com/mb-jquery-components/mb-gallery/

Written by Matteo Bicocchi

February 28, 2009 at 5:53 pm

102 Responses

Subscribe to comments with RSS.

  1. Fantastic !

    I’ll use it for my new portfolio :)

    Stf

    March 2, 2009 at 3:54 pm

    • Hello

      excuse me for my english, i’m frensh student on graphic design .I’ want use your gallery for my portfolio.I want to open one gallery when i clic on the link menu and when i click on the close button of the gallery, i exit it. my question is what’s is the script for open gallery?
      Thanks for your help

      nomisconception

      September 10, 2009 at 9:08 am

      • Hi Simon,
        If you whant to show your gallery by clicking on a link you have to add a display: none style to the div that contains the gallery and call the initialize method onclick of your link; you can make a function yourself where you pass the ID of the gallery you want to show just to simlify the code:

        function openMyGallery( galID){
        $("#"+galID).mbGallery( {
        galleryMaxWidth:0,
        galleryWidth:300,
        galleryHeight:300,
        galleryColor:"#333",
        galleryFrameBorder: 12,
        galleryFrameColor:"#fff",
        thumbStripPos: "right",
        thumbStripWidth:250,
        thumbSelectColor: "#fff",
        thumbOverColor : "#cccccc",
        thumbStripColor: "#333333",
        thumbsBorder: 4,
        thumbHeight:50,
        headerOpacity: .8,
        labelColor: "#333333",
        labelColorDisactive:"#333333",
        labelTextColor: "#ffffff",
        labelTextSize:"11px",
        labelHeight:20,
        startFrom:"random",
        fadeTime: 500,
        autoSlide:true,
        autoSize : true,
        slideTimer: 6000,
        iconFolder: "elements/white",
        startTimer:0
        });
        }

        and than invoke the function onclick.

        Or you could have this behavior calling the gallery via ajax inside your page; using the jquery.ajax method you can call the page with your gallery where you have the initialize funtion in it.

        Now I’m working on a restyling of the mb.ideas.repository website where I’ll publish a gallery on demand example.
        Bye,
        Matteo

        Matteo Bicocchi

        September 12, 2009 at 9:22 pm

      • Hello matteo,

        thank you so much for your answer. I’m very happy because i’ll go conti,ue my website. Thank you for your attendance and your patience to ansewr with friendship for your plug in. i have seen your issue of your magazine, and they’re very fantasic!
        when my site is completed, I would put link for you can appreciate the purpose.

        thank you so much

        simon or nomisconception

        nomisconception

        September 12, 2009 at 10:29 pm

  2. Oh!! man Its A fantastic Jquery Plugin i will use it and if you let me i will write a post about it in my blog with a source link of course by the way i write about your plugins with link to your site you can take a look thanks man for this great Work Keep Going

    islam

    March 12, 2009 at 12:49 am

  3. [...] The Post Source [...]

  4. [...] Plugin basado en jQuery para galería de fotos, bastante útil y con transiciones suaves que hacen ver elegante tu galería. Tiene controles para la transición de las imágenes, muestra de las fotos en pequeño y una descripción de la misma. Este es el ejemplo que se ve bastante interesante, seguro una galería de fotos con este plugin se vera elegante en tu sitio. Aquí la fuente de este post. [...]

  5. Just seen your mb.ideas page, you are doing nice thing out there, but this is the most stupidest way of displaying content I ever seen. Couldn’t stand it and closed that tab. Man, do something about it, you may like it, but it’s shitty for the users, especially when you are aiming at tech savvy users.

    Mike

    March 13, 2009 at 3:18 pm

    • Hi Mike,
      I’ve my blog for tech savvy users as you…
      The mb.ideas website is just for my fun! and of cours you can think whatever you whant.
      bye
      Matteo

      Matteo Bicocchi

      March 13, 2009 at 7:20 pm

    • Hi Matteo,

      I find both your blog and your website really interesting and you are doing a great work here.
      I will use this plug-in for my website and, if you want, when i will publish it maybe you could give me your opinion.

      Thanks again keep working in this way.

      Laz

      Lazarus

      June 13, 2009 at 11:44 pm

  6. MB – That Mike is crazy. Your site is amazing. Thanks for putting it out there!

    Brian

    March 21, 2009 at 5:30 pm

  7. Hi.

    The Gallery is very cool but i thinks there’s a close button missing.

    Keep up the great work.

    MAC

    March 23, 2009 at 3:30 pm

  8. This breaks jquery-1.3.2.min.js!

    While the gallery works none of the other UI components on the page work any more.

    Any advice on this issue would be greatly appreciated. :)

    Cody

    March 26, 2009 at 5:44 am

  9. Hey Matteo,

    Is there any way to have a text show inside the fade transition between the pictures?

    Thanks,

    M a c K

    Mack

    March 29, 2009 at 5:50 am

  10. Nice gallery. Can I modify it and use it on my personal website to show my portfolio?

    David

    March 30, 2009 at 11:11 pm

  11. Cool, thanks. I put a link to my site, if you’re interrested in seeing the implementation…

    David

    March 31, 2009 at 6:19 pm

    • Great work David, I lke your photos!
      there where you have just one photo (night section) you should turn off the autoSlide param (set to false).

      bye,
      Matteo

      Matteo Bicocchi

      March 31, 2009 at 7:40 pm

  12. Thanks. Good idea, hadn’t even thought of doing that!

    David

    March 31, 2009 at 10:38 pm

  13. hi Matteo!

    Thank you for sharing your work!

    I’ve a question: if the actual photo size is 650×400px, my screen display resolution is 1280×960px, then galleryMaxWidth:0 will display the actual photo size of 650×400px,isn’t it? What must I do to display full-screen, even if the actual photo is only 650×400?

    Nice gallery – I am addicted to it !

    Thanks once again!

    josh

    josh

    April 4, 2009 at 6:45 am

    • Hi Josh,
      The best asware should be: why don’t you display a 1280×960 image instead of a 650×400? oversizing images give a very bed display result…
      Anyway I could add a custom image size attibute on each imag to override this kind of problems.
      Next release…

      bye,
      Matteo

      Matteo Bicocchi

      April 4, 2009 at 10:12 am

  14. Hi Matteo..

    Really a Great work.. Thanks for shearing this..

    Dinesh

    April 4, 2009 at 12:47 pm

  15. Thanks Matteo!

    That’s just an option.

    The changing size as each photo is displayed is excellent, makes the gallery exciting to watch!

    Thanks once again.

    josh

    josh

    April 5, 2009 at 7:15 am

  16. I think you packaged the incorrect min file: mbGallery.min.js. It shows the function as mbMaskGallery from your other project instead of mbGallery.

    Gorkfu

    April 6, 2009 at 10:22 pm

  17. hi Matteo,

    very nice plugin! Any idea how can I close the new layer where the
    pic’s are displayed? I think that would be crucial…

    Anyhow, keep up the good work! :)

    Jess

    Jess

    April 9, 2009 at 9:17 am

    • Hi Jess,
      I’ll add a close button in next release; for the moment, as in the demo, you can hide the div with class “gallery”.
      bye,
      Matteo

      Matteo Bicocchi

      April 9, 2009 at 2:54 pm

  18. wow!!
    great one!
    this one is really awesome.
    Thanks for sharing it
    Keep rocking!

    aravind

    April 14, 2009 at 6:26 pm

  19. Hi,
    A very good plug in !
    I think that you could improve your tool by merging it with (mb)ImgNavigator 1.8.
    And by creating a function for adding new picture in the Gallery.
    You are full of talent,
    Reggards from France !

    PH

    April 14, 2009 at 8:31 pm

  20. Matteo, I came across your site today doing a search for jQuery slideshow. I am a developer in the US and I really like your site. Of course I really like the European style. I am married to a Hungarian. Once I have implemented your slide show I will send you a link. It is going to be on a government site.

    George Murphy

    April 16, 2009 at 9:58 pm

  21. hi matteo, great js galllery there, nice work man.

    One question, is it possible to get rid of the description and thumbnails boxes to just keep the “tool” (arrows, play/pause…) box with of course the pictures ?

    kevin

    April 28, 2009 at 3:17 pm

  22. Hi Matteo,

    Is there anyway to move the tool bar so that it runs along the bottom of the picture rather than across the top? I’d rather it didn’t cover the pictures.

    Thanks much!

    Megan

    Megan

    May 4, 2009 at 3:36 am

    • Hi Megan,
      sorry but at the moment the button bar is at the top…
      >I’ll work to customize also the vertical position.
      Bye,
      Matteo

      Matteo Bicocchi

      May 4, 2009 at 4:10 pm

      • Thanks, Matteo. Actually, I meant the title box. I know you can just not choose to have a title, but it is a nice feature.
        I appreciate your speedy response!

        Megan

        May 4, 2009 at 4:17 pm

      • Hi Matteo.
        Really great work!

        I’d like to have the button bar at the bottom of the gallery, too ;)

        Thx for all your nice ideas

        Luca

        Luca

        May 6, 2009 at 9:05 am

  23. [...] Webdesign added an interesting post today on jQuery (mb)Gallery 1.0 " Matteo Bicocchi’s BlogHere’s a small reading Bookmark this on Delicious – Saved by mysteryouse to webdesign jquery gallery – More about this bookmark [...]

  24. Would be nice if the title and thumbnails could be independently positioned via CSS. Nice work!

    heybartender

    May 18, 2009 at 9:36 am

  25. tante grazie signore!

    Hector Pico Della Mirandolla

    May 23, 2009 at 12:13 pm

  26. Hello/Ciao Matteo… thank you so much for your script – I’d been looking around at lots of flash/jquery/etc slideshow elements and was really glad to find mbGallery – it does everything a lot of much more complicated and heavy scripts do and is much easier to integrate with a CMS, which was what I needed. I’m using it inside drupal (a view feeds the img and desc info to your script) on my site here: http://thomaseagle.com. An example of your gallery script is http://thomaseagle.com/slideshow/105.

    Now where’s your paypal button?

    Di nuovo – grazie mille!
    ciao, Thomas

    thomas eagle

    June 4, 2009 at 9:18 am

  27. Hi ,
    A very good plug in !

    But, I have a problem with it when I used it with Other JQuery plugin in safari , The JS and CSS which need’s to include are not getting included … I am trying to show image gallery on a thick box plugin,

    any idea !!

    Sujoy

    June 12, 2009 at 6:36 am

  28. Hi ,
    A very good plug in !

    But, I have a problem with it when I used it with Other JQuery plugin in safari , The JS and CSS which need’s to include are not getting included … I am trying to show image gallery on a thick box plugin,

    any idea !!

    Krishnaiah

    June 16, 2009 at 10:02 am

    • Hi Krishnaiah,
      without your code I can’t understand what is the problem, could you send me or publish your page?
      bye,
      Matteo

      Matteo Bicocchi

      June 16, 2009 at 12:13 pm

  29. Great plugins!!

    Design Freak

    June 20, 2009 at 8:11 pm

  30. How do I hid the close button?

    Greg

    June 29, 2009 at 7:13 pm

    • Hi Greg,
      there’s no options to hide close button at the moment,
      you can delete line 166, 189-190, 405-407 of the mbGallery js file.
      I’ll add an option for that in next release,
      bye
      Matteo

      Matteo Bicocchi

      June 29, 2009 at 7:28 pm

  31. Great Add-on for any site with photo galleries. thanks for share.

    Jeevan

    July 2, 2009 at 4:18 pm

  32. [...] Download and read more about installation here [...]

  33. [...] See a demo here [...]

  34. [...] See a demo here Download and read more about installation here [...]

  35. ciao Matteo, lo slideshow mi piace veramente tanto, penso che lo userò per il sito della funkoff se sei daccordo.

    Ti volevo chiedere se fai anche corsi su jQuery presso aziende, noi siamo di Firenze.

    lookabass

    July 29, 2009 at 5:17 pm

    • Ciao Luca,
      certo che puoi usarlo nei tuoi progetti; per quanto riguarda i corsi su jQuery non ne faccio non ho tempo per farne… comunque se hai già esperienza javascript jQuery ha una sintassi molto più userfriendly e con un po’ di tutorial e voglia di imparare…
      Ciao,
      Matteo

      P.S.: dove siete a Firenze?

      Matteo Bicocchi

      July 29, 2009 at 6:07 pm

      • ciao Matteo
        scusa non avevo visto la tua risposta, ho montato lo slideshow e va proprio bene, lo puoi vedere cliccando una delle due thumb a destra sul sito http://www.funkoff.net.

        peccato per i corsi, il mio responsabile sta da tempo cercando qualcuno esperto di javascript ma per ora non abbiamo trovato nessuno disponibile.

        Io lavoro in indire (ex BDP) in piazza dei ciompi

        a presto e grazie di tutto

        luca
        ps. se per caso dovessi cambiare idea sui corsi scrivimi per mail

        lookabass

        August 25, 2009 at 8:37 am

  36. Superbe galerie. Thanks !

    Volcan Distribution

    August 7, 2009 at 9:46 am

  37. [...] そして多機能なフォトライブラリーはいかがでしょうか? ダウンロードはこちらから サイズや色といったデザイン(レイアウト)面から時間の設定など [...]

  38. I wuld like to morph the images over into each other. Can it be done?

    Mark

    August 31, 2009 at 5:30 pm

    • Hi Mark,
      not jet, I’m going to publish a new release with this feature added.
      bye,
      Matteo

      Matteo Bicocchi

      August 31, 2009 at 8:31 pm

  39. That would be great Matteo!

    Mark

    September 1, 2009 at 6:57 pm

  40. Hi,

    i am creating a tshirt design software. For this purpose i really like your idea. But i have got couple of questions. If image locations(both thumbnail and large) are stored in a database then how can we modify your code to get desired effect.

    regards
    Ayaz Alavi

    ayaz alavi

    September 5, 2009 at 11:01 am

    • Hi Ayaz,
      just write the correct url from the db dinamically; doesn’t metter where images are.
      Bye,
      Matteo

      Matteo Bicocchi

      September 13, 2009 at 2:52 pm

  41. Thanks for such a fantastic plugin, I am currently playing with it at http://nicklewis.net/lab and plan to tailor it for my homepage and other places within my site.

    Nick Lewis

    September 6, 2009 at 8:39 pm

  42. [...] jQuery (mb)Gallery е  jQuery плъгин Р·Р° създаване РЅР° галерии СЃ изображения СЃСЉСЃВ  слайдС?РѕСѓ перспектива. [...]

  43. [...] Read more: jQuery (mb)Gallery [...]

    jQuery (mb)Gallery

    September 14, 2009 at 8:44 am

  44. [...] jQuery (mb)Gallery is a jQuery plugin for creating image galleries with a slideshow feature. [...]

  45. [...] jQuery (mb)Gallery is a jQuery plugin for formulating image galleries with a slideshow [...]

  46. Hi,
    this script is fantastic !
    Please tell me how to change the background of the page when the Wiever is loaded. Now it is something like orange but could not be able toc hange even with the params.

    Thanx and Bravo !!!!!!

    Zigo

    September 15, 2009 at 8:54 am

    • Hi Zigo,
      there’s a param for the background that, in my example, I pass in the function:

      $('#g1').mbGallery({maskBgnd:'#A53900', maskOpacity:.8});

      If you want you can even set an image as background:

      $('#g1').mbGallery({maskBgnd:'url([your background image url])', maskOpacity:.8});

      bye,
      Matteo

      Matteo Bicocchi

      September 15, 2009 at 11:05 am

  47. Thanx. And bravo for this great great script !

    Zigo

    September 15, 2009 at 11:08 am

  48. Hello,

    Having some difficulty displaying the gallery in IE 6.0. The gallery displays below the page causing the user to scroll down.

    web

    September 15, 2009 at 4:11 pm

    • Hi Aspinall,
      I didn’t try the mbGallery with IE6…
      but probably is the CSS “fixed” position I used for the DIV at line 168 of js (is not supported in explorer 6…);
      try to change that value with “absolute”.
      Bye,
      Matteo

      Matteo Bicocchi

      September 15, 2009 at 4:18 pm

  49. Thank you very much. I think that solved my problem! The only other thing (minor) is that the transparent background color doesn’t show up in IE.6 –It’s something I can live with though.

    Very nice website by the way. :)

    web

    September 15, 2009 at 4:26 pm

    • Hi Aspinall,
      That’s because IE6 doesn’t support png transparency;
      anyway we all should stop giving support to IE6 (the worst browser ever!!) to convince people to update, and better if they update to FF, Chrome (Safari) or Opera; faster, more solid and uniform behaviors!

      Bye,
      Matteo

      Matteo Bicocchi

      September 15, 2009 at 5:30 pm

  50. [...] :  jQuery Compatible avec tous les navigateurs Site : mbgallery Démo :  [...]

  51. [...] jQuery (mb)Gallery is a jQuery plugin for creating image galleries with a slideshow feature. [...]

  52. Hi,
    Please tell me how to do this :
    - quit the show by clicking on the image (not only with de cross on the right-
    - print “Close” under the cross
    - delete the SlideShow Option from the panel on the top

    Thanx a lot for that wondeffful scriot :)

    Zigo

    September 16, 2009 at 12:45 pm

    • - quit the show by clicking on the image (not only with de cross on the right
      clicking once on the image you stop the slideshow; clicking twice you start it again… why do you need to close the image by clicking on it? actually you can close it either with the X button or by clicking outside on the mask.

      At the moment there’s no callback functions for the gallery events… so it’s a little bit hard to add behaviours;

      - print “Close” under the cross

      the DOM element is: $(“.header .close”)
      so you can build something like:

      $(".header .close").bind("mouseover", doSomethigOnOver);
      $(".header .close").bind("mouseout", doSomethigOnOut);

      but that should be done once the gallery has been initialized…
      - delete the SlideShow Option from the panel on the top
      the DOM element is: $(“.header .slideShow”)

      But even in this case you should wait the gallery to be load otherwise…;

      I’ll work to have some methods for your requests.
      Bye,
      Matteo

      Matteo Bicocchi

      September 16, 2009 at 1:25 pm

  53. [...] you can have multiple galleries in the page and invoke them with a click! http://pupunzi.wordpress.com/2009/02/28/mbgallery/ Categories: 1 Comments (0) Trackbacks (0) Leave a comment [...]

  54. [...] Settembre 18, 2009 — Davide jQuery (MB) Gallery è un plugin per jQuery per la creazione di gallerie di immagini con funzione [...]

  55. Just some words !!!

    you`re GOD !!!

    thats it !!!

    How do you do all those things ..

    Teach me !!! :(

    jajajaja

    Grettings from Costa RIca !!!!!

    Cristhian

    September 18, 2009 at 8:43 pm

  56. Thank you for the amazing gallery tool. I want to embed the gallery in the page, not have it open in a new window (like this: http://thomaseagle.com/slideshow/105). I feel like I should be able to figure this out, but I am stumped. Any help would be appreciated.

    Jamie

    September 19, 2009 at 1:47 am

    • Hi Jamie,
      What do you mean by open it in a new window?
      if you want the gallery to by launched when your page is loaded instad by clicking on a link just call the function directly:

      $(function(){
      $(‘#[yourGalleryID]‘).mbGallery({});
      });

      Hope this could help you,
      bye,
      Matteo

      Matteo Bicocchi

      September 19, 2009 at 1:13 pm

  57. [...] 19, 2009 8:36 Posted in category Development, Images, JavaScripts, Jquery No Comments jQuery (mb)Gallery is a jQuery plugin for creating image galleries with a slideshow [...]

  58. [...] autosize frame. With the wonderful mbGallery jQuery Plugin, create attractive galleries. Web Site Demo Download AKPC_IDS += "213,";Popularity: 1% [?] Share and [...]

  59. Hi,

    i really like this plugin. Only problem is that it does not work in IE 8. If i leave it in fixed mode, then it shows beneath the web page and the user has to scroll down, and if i set it in absolute mode, and the photo is bigger then the IE window, then the toolbar is hiiden on the top and i can’t select anything. Would it be possible to calculate the client’s window height and width and show the pictures as a % of the size? (just like the width of a table.

    cazze

    September 21, 2009 at 5:21 pm

    • Hi cazze,
      I test it with IE8 and fixed position and it works really fine…
      I’ll consider the possibility to evaluate the window dimension to set image dimension.
      Bye,
      Matteo

      Matteo Bicocchi

      September 22, 2009 at 4:43 pm

  60. Hi,
    Amazing job !

    Is this possible to put some videos (with a flv player, or direct embedded code from youtube for example) in the gallery ?

    Thx

    Cyril Louiset

    September 22, 2009 at 12:51 pm

  61. [...] This post was Twitted by delicious50 [...]

    Twitted by delicious50

    September 22, 2009 at 11:17 pm

  62. [...] View post: jQuery (mb)Gallery 1.5 (new!) « Matteo Bicocchi’s Blog [...]

  63. [...] jQuery (mb)Gallery 1.5 (new!) « Matteo Bicocchi’s Blog (tags: jquery gallery plugin slideshow webdesign) [...]

  64. hello, i want to put a image into the image description. i need an image with a link “send to friend”
    is it possible?

    sorry for my english

    german

    October 16, 2009 at 1:56 pm

    • Hi German,
      At the moment there’s a bug that prevent the rendering of an image inside the image description; I’ll fix it for next release.
      For the moment you can place a textual link.
      Bye,
      Matteo

      Matteo Bicocchi

      October 16, 2009 at 9:42 pm

  65. Great work on this gallery. I notice that you always put the gallery in the page’s body. Is there a reason for this? If I wanted to put it in a containing div instead of $(body) how would I do that? Could I use something like $(this).partent()? Or something like that?

    Bryce Martin

    October 28, 2009 at 4:49 pm

    • Hi Bryce,
      The jquery.mb.gallery is drawn in the body to have full controll of its positioning and to be shure it gets the higher z-index in the page; this component ideas is to get over all in the page and not to be constrained into a DOM element.
      A solution for your issue could be to load the gallery into an iframe, as I do on the demo page of my site : http://pupunzi.com/#mb.components/mb.gallery/gallery.html.
      Bye,
      Matteo

      Matteo Bicocchi

      October 29, 2009 at 10:25 pm

  66. Social comments and analytics for this post…

    This post was mentioned on Twitter by ijosh91: mb.ideas.repository – mb.gallery http://tinyurl.com/yjjp93s...

    uberVU - social comments

    November 4, 2009 at 10:28 am

  67. Ciao Luca,
    è vero che sarebbe bello avere la button bar in basso, il problema che ho è legato alla visualizzazione delle thumbs…
    Comunque ci lavoro sopra e magari alla prossima versione… chissà…

    Ciao,
    Matteo

    Matteo Bicocchi

    May 6, 2009 at 8:50 pm


Leave a Reply