This website uses cookies to personalise ads and to analyse traffic ok
web design

SIDEWAYS – jQuery fullscreen image gallery

SIDEWAYS – jQuery fullscreen image gallery

A simple, yet elegant fullscreen image gallery created with the jQuery library and CSS. The gallery features fullscreen images in various modes and custom scrollbars.

SIDEWAYS image gallery is made by implementation of some previous scripts and tutorials posted on this blog and some (minor) CSS3. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin.

I’ve included the complete gallery code on page 2 of this post.

Changelog

  • Nov 20, 2010
    • Minor code optimization
      Loading new image with different dimensions updates correctly
      Clicking on final image loads the first one (looping)
      Added original view mode option (no image scale)
      Change default view mode quickly by setting $defaultViewMode variable in the script
      Fixed conflict when placing links inside thumbnail panel
  • Oct 19, 2010
    • Added second script that utilizes native browser scrollbars and click to open panel mode (better suited for touch devices)
  • Sep 26, 2010
    • Script and code have been optimized significantly

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
http://opensource.org/licenses/MIT

Pages: 1 2


284 Comments

Post a comment

Comments pages: 1 2 3 4 5 6 7

  1. SSujay
    Posted on July 4, 2012 at 16:54 Permalink

    Great work…Amazing Stuff, i want to use this for my website gallery,
    I have recently created web on WordPress , I am newbie, Can tell me how to install this on my website

    Reply
  2. shofer
    Posted on June 27, 2012 at 22:58 Permalink

    http://www.ridingclub.pl/galeria.html

    The pictures of pressing the dough turns on again the same picture.
    What that showed up next?

    Please reply…

    Reply
  3. Eswaran
    Posted on June 12, 2012 at 13:57 Permalink

    its awesome bro..
    I have one doubt regarding the script.Shall we can load the external HTML page without using image.Can you help me in this regard?.

    Thanks in advance!!!

    Reply
  4. CMentality
    Posted on May 24, 2012 at 18:03 Permalink

    First of all, great gallery!

    I’m trying to pull the images from a directory with php, but I’m having some troubles.
    Only the first full screen image from the ‘space’ folder is pulled from the directory and it is being repeated.
    The thumbnails are being displayed just fine.

    I hope somebody can help me with this:

    //path to directory to scan $directory = "../gallery/imgs/space/"; //path to directory to scan $directoryth = "../gallery/imgs/space/thumbs/"; //get all image files with a .jpg extension. $imagez = glob("" . $directory . "{*.jpg,*.gif,*.png}", GLOB_BRACE); //get all image files with a .jpg extension. $images = glob("" . $directoryth . "{*.jpg,*.gif,*.png}", GLOB_BRACE); //print each file name foreach($imagez as $image) { foreach($images as $imageth) { echo "<a href='$image' / rel="nofollow"></a>"; } }

    Reply
  5. Florix222
    Posted on May 14, 2012 at 18:41 Permalink

    Hi, malihu!

    Wow it´s really remakalbe what you did. Is it possible to have external links on each of the BIG Pic on the right?

    Best regards
    Flo

    Reply
    • Florix222
      Posted on May 14, 2012 at 18:43 Permalink

      I´meant remarkable 😉

      Reply
    • john
      Posted on June 2, 2012 at 23:34 Permalink

      NO WAYYYYYYYYYYYY

      Reply
  6. Piotr
    Posted on May 13, 2012 at 15:06 Permalink

    Do you mind hosting the code on github.com??
    That way, you can have a nice versioning system.. AND people can help contributing to it!
    I could help you out if you need support putting it there 🙂

    (I dont work for github.. but I use it a lot for my own work. Besides a lot of major opensource software is hosted there because it’s just easy and powerful. twitter-bootstrap, html5 boilerpalte, backbone.js as well as many others are!)

    Cheers and Thank a lot bro ^^

    Reply
    • malihu
      Posted on May 14, 2012 at 03:15 Permalink

      I wanted to host code on github.
      The thing is I’m currently re-design this site, working on a new plugin (I’ll post here of course) and I did upgrade my hosting server (due to traffic etc.)… so I’m pretty full at the moment.
      It would be awesome if you could help putting the code on github though 🙂 Especially, since I haven’t use it yet so I’ll need to see how it works etc. Can you help?

      Reply
  7. slider2nl
    Posted on May 4, 2012 at 22:32 Permalink

    I cant get de sideway slider to the right or i am missing something, can you please tell me how i place it to the right side of the screen. Thanks..

    Reply
    • malihu
      Posted on May 5, 2012 at 01:08 Permalink

      Unfortunately at the moment you can’t reposition the slider (at least not without major script editing). I’ll try to find some time to update the script with such feature and post the updated version.

      Reply
  8. Rom
    Posted on March 28, 2012 at 00:01 Permalink

    This is close to what I’ve been looking for. Props to you sir!

    I wanted to have my Site Navigation Menu in the slide box (including images linking to recent entries listed downward), and my main content (such as an article) in the main container.

    How would I go about doing this?

    When I place an article in the main content area, I can’t scroll down.

    Feel free to contact me regarding compensation.
    Thanks in advanced.

    Reply
  9. erwin
    Posted on March 15, 2012 at 17:14 Permalink

    In this page there is a great example what I’am looking
    http://tee-se-itse.hongkong.fi/fi/kasityokalut/kasisahat-ja-terat/g-man-rautasaha/p/186526/
    When you click “iso zoomattava kuva” -button you see what I mean. That is a full screen.

    Reply
  10. erwin
    Posted on March 15, 2012 at 17:11 Permalink

    How can this is a full screen? You can still see browser toolbars etc. I’m interested real fullscreen image gallery. Like you watch youtube in fullscreen mode.

    Reply
    • Sebastian
      Posted on March 8, 2013 at 03:50 Permalink

      use this as a link

      <A href=# onClick=toggleFullScreen();event.preventDefault()>Click here for Full Screen</a>

      and this script after the gallery script

      <script>var bodyElement=document.getElementById("body"); function toggleFullScreen(){document.fullScreenElement&&null!==document.fullScreenElement||!document.mozFullScreen&&!document.webkitIsFullScreen?document.documentElement.requestFullScreen?document.documentElement.requestFullScreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.webkitRequestFullScreen&&document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):document.cancelFullScreen?document.cancelFullScreen(): document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen()}document.addEventListener("keydown",function(a){13==a.keyCode&&toggleFullScreen()},!1);</script>

      Reply
  11. William
    Posted on March 14, 2012 at 21:20 Permalink

    God!

    You kickass.

    Reply
  12. JL
    Posted on March 1, 2012 at 12:03 Permalink

    This is Spectacular

    Reply
  13. Olah Marcel
    Posted on February 19, 2012 at 16:23 Permalink

    I use jquery dropkick and I have the following problems:
    1. I can’t scroll the select form options because it is scrolled the entire page (maybe conflict with the jquery mousewheel)
    2. I can’t close the select form only if I click on the select form (if I click anywhere else, the selct form simply don’t close)

    Reply
    • Olah Marcel
      Posted on February 19, 2012 at 16:26 Permalink

      http://www.ardf.ro/side/
      This is the website where the jquery sideways is used.
      Please if you have ideas about this problems, help me out.

      Reply
  14. Philippine Christian
    Posted on February 14, 2012 at 10:48 Permalink

    Thanks for sharing this great script… good job!! Cheers!

    Reply
  15. Ignacio
    Posted on February 14, 2012 at 04:01 Permalink

    Hello, Amazing slideshow gallery, I ve been looking for this for some time. Im using a wordpress template i like the way i modified it ad Im just using for a home page. I would like to add a link where it goes straight to that gallery. Im sorry for my question, I know it may sound really stuid, but unzipped the zip file and put it in my ftp server, then made a link on my website specifing the url. but it didnt work. I dont know what im doing wrong. I also tried to install the plugin via wordpress plugins add on but it fails to install the plugin.
    Im sorry but how can I use your jquery gallery and use it. I have my domain with go dady and im using wordpress. I know how to access via ftp. Could you tell me please. I will really apreciate and I love your slideshow gallery and I will definetly give you credit on my website for your gallery. Thank you so much and talk to you soon.

    Reply
  16. Dan M
    Posted on February 12, 2012 at 02:19 Permalink

    Hi there.

    Thank you very much for this wonderful piece of coding.
    I am not so experienced in JQuery or JavaScript and I tried to use my AS3 skills into solving one simple problem : making the default image clickable (as in going to the next one, without selecting a thumbnail) . Apparently my AS3 skills didn’t help. I read all the comments and I saw a similar one with no reply:

    I think that the solution is very simple, but I am just not able to see it. If you can drop a short line I would appreciate it very much.
    Keep up the good work and thank you again!

    Reply
  17. jwack
    Posted on February 5, 2012 at 06:58 Permalink

    @malihu

    i posted this awhile back

    “Is there any way to keep the gallery in $defaultViewMode=”full” but if the selected image is taller than it is wide automatically switch the defaultViewMode to “fit”?

    Do you have any suggestions?

    Reply
  18. Mario
    Posted on February 2, 2012 at 17:14 Permalink

    Hi,
    this is one great gallery. Thanx a lot for sharing it with us.

    I got one wish maybe for the next version. It would be great to have the next image already preloaded, so when clicking a image, the next one would be shown quit instantly.

    Best,
    Mario.

    Reply
  19. Tirumal
    Posted on January 30, 2012 at 15:30 Permalink

    awesome!! Can I insert some div for image caption and description in it?
    Thanks for sharing such an excellent work!! you Rock!!!!

    Reply
  20. Jeison
    Posted on January 19, 2012 at 21:59 Permalink

    Hi!

    Great gallery!

    I have a question. How do I start the gallery when the page is loading?

    thanks

    Reply
  21. Ramiro Modica
    Posted on January 17, 2012 at 20:17 Permalink

    Hi.

    Is there a way to put the button “next image”, in the first image of the gallery?

    Reply
  22. Miranda Kerr
    Posted on January 4, 2012 at 21:45 Permalink

    This is such a beautiful way to display an image gallery. I love it! Thank you so much for sharing your hard work. I have a project I can use this for.

    Reply
  23. kewas
    Posted on December 30, 2011 at 21:30 Permalink

    Too cool. This is one of perfect image gallery. It quite good.

    Reply
  24. Marian
    Posted on December 23, 2011 at 16:38 Permalink

    I love this script… actually I’m VERY impressed ! congrats & keep up the good work !

    Reply
  25. Wallace Erick
    Posted on December 15, 2011 at 17:28 Permalink

    doesn’t works with video?

    Reply
    • malihu
      Posted on December 25, 2011 at 15:00 Permalink

      Nope. It’s just an image gallery.

      Reply
  26. Luke
    Posted on December 3, 2011 at 18:05 Permalink

    I have no idea how could I install it to a single page.. I´m new at wordpress comunity and don´t understand how to integrate jquery.. Can anybody help me? Thanks!

    Reply
  27. Jean-cédric T.
    Posted on November 28, 2011 at 11:41 Permalink

    You kept It smart and simple ! Slick and efficient ! Great job !

    By the way, I have a super ego, I’m lazy and nut crusher 😉 so I currently try to enhance your code to be more like a “real jquery plugin” than “just” some js code wandering around. Plus, I port it to Coffeescript (I’m a nut crusher, remember ? ;D ).
    You didn’t seam to use any licence for your code, nor a code repo (like sourceforge, github, etc.).

    So, here are the questions:

    -Do you grant me the right to put the code under something like GPL 3+ or LGPL at least ?

    -Do you have any preference for a code repo or can I use github as I wanted in first place ?

    Thank you again for this beautiful gallery !

    Reply
    • josh
      Posted on December 2, 2011 at 22:42 Permalink

      Awesome setup man… 😀
      I’ve got this working with BBQ Deep-linking perfectly. Plus im using Drupal 7 to create relationship based galleries that house One Image Per Node image-nodes, this brings commenting ability & super simple gallery/image creation/management etc… im still working on adding more features such as loading the other related content via ajax, but its looking good!

      Thanks for the inspiration!

      Cheers!

      Reply
    • alain
      Posted on December 20, 2011 at 21:26 Permalink

      I would love this see the answer to this question because I could use your cleaned up version!

      Reply
    • malihu
      Posted on December 25, 2011 at 14:58 Permalink

      @Jean-cédric T. Thanks for your comments. I give you the right to do anything you want with it (GPL 3, github etc.) as long as you reference the source somewhere 🙂

      @josh Great! Thanks for posting this.

      Reply
  28. diseño paginas web
    Posted on November 25, 2011 at 11:23 Permalink

    gracias por la coleccion y comportatirla! thanks

    Reply
  29. Nick Wiltshire
    Posted on November 23, 2011 at 20:24 Permalink

    Hi, Brilliant code, thanks!

    Just wanted to check, I’m not great with javascript and their may be a quick solution. Has anyone added a history plugin to the script?

    I downloaded this jquery history plugin http://tkyk.github.com/jquery-history-plugin/ but I’m just shooting in the dark trying to get it to work..

    Any ideas?

    Thanks, Nick

    Reply
  30. gentlebird
    Posted on November 22, 2011 at 12:19 Permalink

    i love this script and i am thinking about redesigning my side with it.

    it already has been asked but not answered yet.
    is there an option of autoplay? would be very cool

    Reply
    • malihu
      Posted on December 11, 2011 at 13:50 Permalink

      Not at the moment ;(
      I’ll try to find some time to implement an auto-play function and post an update here.

      Reply

Comments pages: 1 2 3 4 5 6 7

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php