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$defaultViewModevariable in the script
Fixed conflict when placing links inside thumbnail panel
- Minor code optimization
- 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.
https://opensource.org/licenses/MIT
Donating helps greatly in developing and updating free software and running this blog π
Pages: 1 2
I really love your code. By the way can I reuse it? π
Yes, the license is Creative Commons Attribution 3.0
http://creativecommons.org/licenses/by/3.0/
This is an amazing gallery! Really love it π
I’m gonna use it on a project I’m currently working on, and is restyling it a bit for the purpose. I want to put more content inside the left panel but that is causing some problems with the scrolling. To be more specific, if I’m repositioning the #dragger_container by adding margin-top to this element it seems to have some problems with calculating the height of the scroll area and the bottom part of the scroll area wont be visible when you scroll down. You can see what I mean here: http://www.mc-ash.dk/portfolio/sideways.html
Hope that makes sense π
I think it’s a JS-thing but I’m kinda new to JS so I can’t really figure out what parameters to change. Hope you can help.
Thanks in advance.. and again, what a nice gallery π
Edit:
Actually I want to push the entire .container AND #dragger_container down because I have the menu in the top as you can see on the link I posted in my previous comment. The problem is that the menu is conflicting with the content and the scrollbar if I don’t push these elements down..
Great script! Very nice work!
I used it for my portfolio:
http://www.robertbutkovic.com/
thanks!
Awesome! Great work π
Hello and thanks for this great script !! Personnaly I love it.
I would like to know if it could be possible to link directly to a specific image so that it would open full ?
I would like to have a splash page where you could choose between all the different thumbs and click on one would let to this design… but if I do that the way it is I won’t be able to point to a specific picture.
Furthermore, the script as it is, is not optimised for search engines (SEO), since everything is on 1 page, and I was wondering too if there could be a way so that when you click that you go to /#Universe-and-planets-digital-art-wallpaper-lucernarium and on the second to /#Universe-and-planets-digital-art-wallpaper-denebola etc… see what I mean ?
Thanks anyway since I really have pleasure having fun with it !!
Bap
PS: sorry for english is not my native language… π
This is amazing work. All my images are in portrait format not landscape, however, so I was wondering if you’ve done anything similar where the image sizes to fit beside the thumbnails and nothing slides over?
The optimal view mode for portrait images is FIT.
You can see all view modes in action by clicking image view mode button on gallery’s slide panel.
To make fit the default view mode for your gallery, change the $defaultViewMode variable in the script from “full” to “fit”:
$defaultViewMode="fit";Hi, i really like the sideways gallery i just have a question how can i load HTML content when i click on a link. i have read in the comments that you will need to change the js handler just wondering how would you implement that, i am trying to use the template with WordPress. thanks in advance.
Hi,
Great stuff you got here!
I was just wondering if it’s possible to add an “autoplay” or “pause” or “play” function in your awesome gallery..
Thanks! π
Hi, Malihu
Me again. The images do not appear when I use the file “malihu-jquery-image-gallery.html” of the downloaded file in IE9. Can you help me?
I have problems using the gallery in IE9. The images do not appear. Can anyone help me? Anyone else had problems with this? Thanks.
Hi Dan,
I’ve tested the gallery on IE9 and works as expected. Have you tested the demo or another implementation?
I tried the code in an assembly with other jquery (tabs, for example). Must be a problem with someone who makes the gallery does not appear. In IE8 worked well. Anyway, thank you very much and congratulations for your work.
I am looking for an effect similar to that when the image in full screen can be viewed by moving the mouse or the scroller…
i’m looking for this same functionality (image panning).
Malihu, is there a way to combine this piece with your jQuery image panning piece? i was trying to use the “clickable mode” on the gallery and pair the image panning with just the #bg div, that way the mouse movement wouldn’t send me back to the thumbs but i am having some issues with the two scripts.
any help would be great.
WOW!!
Awesome job on the gallery, very impressive. I get bored with seeing the same 4 galleries spread across the web.
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”?
I really like the full mode when the image is landscape but if my images are taller (portrait) they get cut off in full mode.
can anyone help on this? There has to be a way to use jquery to check the height and width of the image using $this.width() and $this.height and if $this.height() is larger set $defaultViewMode=βfitβ. Just not sure how to do it.
BTW, I am turning this awesome gallery into a wordpress theme, its nearly done but this last thing is holding me up.
jwack,
Yes, there are jQuery methods to do exactly what you are thinking, and are basically what you have described. First off I’ll give you some of my own thoughts on where you need to inject the logic to check for the size of the image being loaded…
I’m thinking that you will most likely have to either create a function and include it, or write similar logic inline in at least two (maybe three) different spots to check image size and set the view mode. I’m thinking (without having much time to actually test my little theory) that you will most likely need to add to the code in the jQuery behaviors for…
1) $outer_container_a.click(function(event){
2) $bgimg.click(function(event){
3) and perhaps inside of … function LargeImageLoad($this){
I’m not sure about the last one, or if this is all the points in the existing code you need to check. I would have liked to give you a more pointed answer in this regard, I’m in the middle of sorting out some of my own needs right now and as a result the code I’m working on is currently FUBAR so is hard to make sure I got them all. Anyways I believe the next step towards finishing your project is to identify these points so you know when to perform this check.
The next thing to address is how to actually make this check.
The jQuery selectors you will need to check are not going to be as simple as ‘this’ or the cached variable ‘$bgimg’. This would be nice, but unless you want to load the image and them resize it (which would end up looking basically the image was loaded twice) you will want to look into the $bg.data(“nextImage”) variable selector. I’m not positive on this but it could be possible to find the size of the next image BEFORE it is loaded with something like this…
[$bg.data(“nextImage”).width() .. OR .. $bg.data(“nextImage”).height()]
(not 100% on this exact method, but there is a way to do that using the $bg.data(“nextImage”) selector, I’m sure of it)
Just an observation, but this check may get more complicated than you initially think; not much more, just slightly. So if you are checking to see if the height of the image object is too large for the window the check would go something like this…
[ if($bg.data(“nextImage”).height() > $(window).height()) ], right…
then the actual setting of the size is simple thanks to malihu’s ImageViewMode(theMode) function that sets the size of the image and the state of the view mode selector based on the contents of the theMode variable. So hopefully this makes some amount of sense and is pertinent to what you are asking. One last thought, If you check for an overflow of height you should probably automatically reset the Image View Mode tool to it’s default on every new image load, or make the check for height go both ways (such that if the image is too tall for the screen the DefaultViewMode is set to ‘fit’, conversely you need to check if the image is NOT to tall for the screen the DefaultViewMode should be set to ‘full’).
This may help or not depending on your comfort with jQuery. Not a super hard mod to make to this code and it is completely doable. Don’t get discouraged and let us know how it works out. I’ll be checking back here to see if malihu or anyone else has some help for my issue above, so when I come back to the page I’ll check your post.
Hope this is helpful.
Justin Mann
PS I know I’m not the only one here with something to offer someone else here. This project is great and if you’re here you have probably benefited from it, if so please use some of that time that malihu saved you and help him by helping others. (just a thought)
Thanks for the response. I will review this and give it a go. I am not very familiar with JS or Jquery but we’ll see. Again, thank you for taking the time to respond.
I am having the same problem as jwack. Have you figured out the solution yet?
I’m so taken with your gallery I used it again on a personal project. I got a little more extensive with it this time layering on additional jQuery and jQuery UI functionality, as well as including User Account controls, SQL backend, User Account Interfaces, PHP ImageMagick coolness to re-size and generate thumbs on upload, and such. At any rate one of the things I’ve started to do is to basically add a filter (a category selector if you will) to the gallery. My solution so far was to simple clone your ‘toolbar’ (the image view mode selection tool) and implement it as a another tool acting as the ‘gallery category selector’. I use a simple switch to set a javascript variable to the current scope of the gallery, the visibility of the thumbnails is controlled by hiding on the class ‘thumb_link’ (part of your original code) and showing on the custom category class that I insert as the page is building (This is bound to the .click event of the ‘gallery category tool’ I insert).
All this functions swimmingly as long as the thumbs are the selection point for the new image, My troubles (which I knew I would have some in this regard) are in forcing all the .click behaviors associated with the $bgimg variable [$(‘#bg #bgimg’)] to respect the current gallery category state. There are a couple simple methods to do this by using the value of the js ‘gallery category’ variable as the jQuery style selector for the class
[i.e. – $bg.data(“nextImage”,$($outer_container.data(“selectedThumb”)).next(“.”+$gallerySelector.data(“galleryMode”)).attr(“href”); – OR – $bg.data(“nextImage”,$($outer_container.data(“selectedThumb”)).next().find(“.”+$gallerySelector.data(“galleryMode”)).attr(“href”);] (this example line is from your ‘Large Image Load’ fxn).
This works in part, If I only make the change I noted above this results in a partially successful behavior of not loading the image if it does not have the required category class, but you may have to click bgimg several time to get to the next valid image (instead of just jumping to the next image of that class). There seem to be several potential insertion points for a similar modification to your code (really every .next() binding on the thumbs is suspect to me). So at this point I thought I’d defer to the master and see what you thought, I have a few different options floating around in my head to achieve the desired results. One scenario would be that I need to target specific instances of the .next() binding to get the nextImg and next/newTitle variables to load up correctly, another thought would be that I could put a while loop in the ‘Large Image Load’ fxn to eat thumbs until it finds the correct one (this could complicate the final image check), or it could be the case I’m just not targeting the correct jQuery behavior to make this easy on myself, so here I be. I realize is a lot here, but hopefully helps you help me. π And as always if I get this behavior working correctly I’ll clean up my code a little and post the url here so other humans can see the modifications for the gallery category selector.
Thnxs malihu,
Justin Mann
So anyways… fixed my issue a while ago. Instead of making tons of changes to the code that was there I decided to take a different tact. I’m just reloading a div with the thumbnails instead of hide/showing the different thumbs according to category. When someone uses the gallery category the gallery is simply rebuilt and the jQuery behaviors for the thumbnails are rebinded. This is a much more elegant solution than what I was initially trying to do and is a method most anyone could use to integrate some type of category filter into this (or other) galleries. I’m not going to explain all of the functionality, but here is a simple run-down…
I cloned the ‘Image View Mode’ tool and re-purposed it to maintain ‘Category’ data to filter the images by type.
The next thing to do was to write some jQuery javascript functions to change and maintain the category data (really just a javascript variable).
I then bound a jQuery load to the ‘Category Selector’ object I have built, It is built into one of my jQuery functions that fires every time the ‘Category Selector’ is clicked. This load uses a custom php file that builds HTML for the thumbnail objects that are part of the selected category (it does so by passing the current state of the category javascript variable by posting the data), I only really mention this because anyone interested won’t be able to see the php filter I created.
The last thing to do was to take advantage of the built in callback in the jQuery load function I used to rebind the thumbnails to load the ‘bg img’, I just used an inline function and shoved malihu’s code in.
My name at the top should link to the page I’m talking about if anyone needs to see any of this code (the javascript/jQuery stuff at least) to solve a similar problem.
Anyways good luck to all and take some time to think about your approach, most problems I have are eventually solved by thinking about it differently.
Justin
Fantastico!
Es posible aplicar en Blogger?
Hi,
I want to add “swf” file in this slide please let me know how we can add.
Thanks in advance.
please rely me on my email it’s [email protected]
Really nice code, best design iv`e seen in a while, but is it possible to make it zoom in and out by scrolling?
How can you add this option in JS?
http://www.rborn.info/blog/moozoom/
would be one solution if you haven’t already found one.
This is great!
What about showing the current image (with hovering “loading” box”) until the next one is loaded instead of leaving the page blank with no pictures?
Dear WebMaster,
This is the first first webgallery which I saw through my whole web browsing. This is the best & very unique gallery.Thanks a bunch for posting this!
Just wanted to say, this is a really neat image viewer. I only have one question though, is there a way to have your images sorted? Right now, my pictures are in reverse order, and I would like to flip them. I found the script with the Picasa additions at Paul van Roekel’s site, and his site pointed here for more information. Thanks.
Hello Mark,
The script (as with any javascript) handles only the client-side or front-end part. Entries sorting is best done by server-side programming (PHP, ASP etc.) depending on how you fetch your data (database or not).
Hi
I am jay, I like this script very much, it’s amazing script for the photo album
Good, keep it up
Awesome mate! it is really awesome gallery
Thank you
Wow, it is really awesome gallery! Thanks
Could a div or multiple divs be introduced on top of each image that gets slid in so i could use your slider as a full screen page navigation. each image would also bring the respective content for that section in the divs.I am thinking of using your slider as a portfolio site. Thank you
Awesome mate! I am a Flash / FLEX developer as well, love PaperVision and always followed the clash between Flash / HTML5. I used jQTouch a while for mobile web development and got into that stuff a bit.
Your gallery showes that more and more thing won’t require Flash anymore… π
Hey, I added Picasa functionality to it – it displays a few images from my online library here: photos.marcosiebert.com — and I am going to extend that thing to make it configurable. Maybe SenchaTouch could be a good addition? If you’re interested – from Flash-dev to Flash-dev, we could experiment a bit more π
Hi,
This is a really great gallery. It’s perfect for my portfolio site. I came across an situation with adding videos. Is it possible to add the video and make it play where the images are?
I tried video light box, but this code interrupts the sliding of the panel if I leave it as is. but once I move the head section of videolight box to above the gallery’s “script type=” section, it plays at full screen.
I don’t want that to happen. You can go to http://www.nubiapalacios.net to look at it.
thanks !
Hi Malihu,
I really really like this design and would love to use it as an online photo gallery.
One thing I’ve been trying to tweak for the past two days with my super basic knowledge in code is to have the SlidePanels show when the thumbnails are clicked. If I change the close to open
[ SlidePanels(“close”); //close the left panel ] it works but then each time I click next image in the full screen mode the SlidePanel shows up again. I have tried to add [SlidePanels(“open”);] in the “//Clicking on thumbnail changes the background image” section but was unsuccessful, I’m guessing the syntax is wrong(?). Could you provide some pointers to how to edit the code?
One other question, is it possible to make the first loaded image have the “click for next image” button?
Thanks for this awesome code and being so generous!! π
karen
THanks for this great plug-in and demo.
It helps me a lot in my project!
But there is one question I want to ask , when the thumbnail is loaded, there might be many.
Can I combine your code with “Load while scrolling” jquery things?
Sorry, I am not a good jQuery programmer, can you point me ways that I can handle better thumbnail download??
Thanks alot!!
I haven’t tested it but load-on-scroll plugins usually work independently of other scripts, so you shouldn’t have any conflicts.
The thing is that jquery .scroll() function (which is the one used in such plugins) normally applies to window or elements (e.g. divs) that have their css overflow property set to scroll or auto. Sideways thumbnail area utilizes a completely custom js scrollbar so I’m not sure if a load-on-scroll plugin will work out of the box.
Malihu,
Great gallery! I like it so much I’m going to change my website over to it leaving the design pretty much as-is.
I’ve been working on some tweaks the last couple of days, and since others have asked for these, I thought I’d pass them along. I’ve added a PHP function to auto-populate the divs (be sure to change the file extension to .php), added a slideshow and a few other minor items. Keep in mind this is still rough code I’m throwing together, but it might be a good starting point for others.
Rather than trying to copy and paste the code, see the changes and get the code at http://chrisraezer.org/testGallery/testcode.php . This also uses the tooltip at http://flowplayer.org/tools/ . I would have used yours, but I’m used to this one and could throw it in quickly.
One item that has me stumped right now is part of the slideshow. I have a function at line 209 that uses setTimeout to trigger the next image by simulating a click on the “Next” button (I added this instead of clicking on the background). The problem I have is figuring out how to have it wait until the image is loaded before firing. If the connection is too slow, the image won’t be completely loaded when the slideshow fires for the following image. If you have any ideas to make this better, that would be great.
Chris
My bad all…
URL for modified code is montanamereoritelab.com/gallery.php
Good job! Thanks a lot for sharing your mods Justin π
Hello,
Just take a second and post to let you know how much time you saved me. Great work…
I also wanted title and caption to display with the images as the entire gallery is sourced from an xml file with such info associated with each image. At any rate I was able to make the changes and tweak things the way I wanted in about half a days time thanks in part to your extensive line comments (thanks for that).
I edited on lines…
68-72 (inserted containers for image title and image caption w/ inline style),
95-118 (just binding my own jQuery hover events, not really essential just a tweak),
213 (added the ‘centering’ function I created for the ‘title’ and the ‘caption’ containers to the window.resize event),
268-270 (added hiding the ‘title’ and the ‘caption’ containers to the ‘$outer_container_a.click’ event),
286-294 (added populating and then showing the ‘title’ and the ‘caption’ containers to the ‘$outer_container_a.click’ event),
300-302 (added hiding the ‘title’ and the ‘caption’ containers to the ‘$bgimg.click’ event),
329-337 (added populating and then showing the ‘title’ and the ‘caption’ containers to the ‘$bgimg.click’ event),
443-459 (this would be the lil function I put here to re-center the two containers, since we aren’t exactly centering the two containers they are essentially centered horizontally so this could really be tweaked, or made to be more intelligent so vertically the containers bind to the top and bottom of the image).
The modified code is available at montanameteoritelab.com and is essentially ‘the lazy way’, but it wourks and could be helpful to some of you that are having trouble making this modification. Look for malihu’s update as I’m sure he’ll do quite a bit better job incorporating this than my 3 or 4 hour session produced.
Once again, KUDOS malihu. Innovative, elegant, and functional, thanks again.
Justin Mann
SimplePlan, LLC
Awesome! Any ideas how you could dynamically determine that an image is portrait and then use fit for that only. Landscape images can stay in full.