expandable-image-gallery
December 10, 2014 | 68 Feedbacks

Expandable Image Gallery

An image that expands on click, going full-width and turning into a gallery.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We often see the “2 blocks modules” design approach: 50% width image on one side, and text on the other. These modules can be used for an About us section, to explain product features, or, like in our example, for the product preview image and information sections.

Generally the user can’t interact with the image. But what if you want to show more than one picture? An option could be to fire a modal slideshow on click. CSS Transitions allow new UX solutions though. A new approach could be to expand the image, make it full-width by covering adjacent content and pushing down lower positioned content, and turning it into a full-width slideshow!

Inspiration came from this Dribbble shot by Jonathan Howell.

Creating the structure

The HTML is structured in 2 main <div> elements (.cd-slider-wrapper and .cd-item-info) – the first containing the image gallery and the second the product info (title, action button..) – wrapped inside a section.cd-single-item. The remaining content is inserted in a separate .cd-content section.

Note that the .cd-slider-pagination element (navigation for paging control of each slider) is not directly inserted in the html but created using jQuery.

Adding Style

On small devices the CSS is pretty straightforward: both .cd-slider-wrapper and .cd-item-info are in full width and follow the standard flow of the page.

On desktop devices (viewport width more than 1024px) we assigned a position: absolute and width: 50% to the .cd-item-info and placed it on the right side of the screen.
For the .cd-slider-wrapper element, we set width: 50%. When user clicks on the image gallery, we add the .cd-slider-active class to the .cd-single-item section: the .cd-slider-wrapper width is set to 100%; this way the .cd-slider-wrapper enlarges, covering the .cd-item-info (which is in position: absolute) and pushing down the remaining content. CSS3 Transition to the width value has been added in order to achieve the smooth animation.

For this technique to work properly, the gallery images should have an aspect ratio higher than 1 (width higher than height); when the image is in slideshow mode, its height is increased proportionally to its width. Therefore an image with aspect ratio minor than 1 would cause more scrolling.
Besides, since the .cd-item-info is in position: absolute, the height of the .cd-single-item is set by the gallery image height only; consequently the .cd-item-info height has to be smaller that the gallery image one.

Events Handling

We used jQuery to trigger the slideshow mode when user clicks the preview image. Besides, we implemented a basic slider for the image gallery (with keyboard and touch swipe navigation, previous/next and paging navigation).

Changelog

June 17, 2015
  • Bug fixed - disable swipe if only one slider is available
May 25, 2015
  • Bug fixed on 43.0.2357.65
Dec 13, 2014
  • .js file updated to be used with multiple image galleries
Dec 10, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Elancore

    Why you guys don’t use Bootstrap?

    • http://userx.co.za/ Michael Thorne

      (╯°□°)╯︵ ┻━┻

      • Elancore

        ┻━┻︵ (°□°)/ ︵ ┻━┻

    • Seito

      It’s not that much work to integrate this with Bootstrap

    • http://codyhouse.co Claudia Romano

      Hi Elancore, we prefer to build our nuggets ‘framework-free’ so that they can be used by everyone. Of course you can decide to use them as they are or just integrate them with the framework you prefer.

      • Elancore

        Thanks Claudia

      • http://justinjwilson.com/ Justin Wilson

        How might I implement this into Foundation? Any possible conflicts with css/js? This looks like a great feature for a portfolio.

  • Paul

    this is really pretty. Just wanted to say thanks for this. If it wasnt for sites like this i wouldnt be a web developer lol!

  • Nicolas De Mena

    I love it!
    I have a problem when I want to get multiple expandable gallery, can you tell me if it’s pssible ?

    • http://codyhouse.co Claudia Romano

      Hi Nicolas, just uploaded a new version. Should solve the issue with multiple gallery ;)

      • Nicolas De Mena

        Thanks you very much Claudia!! I will watch this right now, thanks again for your work, codyhouse is my religion :)

  • Jonathan Howell

    Wow, awesome! I’m stoked to see someone coded this thing :) Also thanks for the credits as well!

  • majid1889

    Perfect !
    I wanted to use it in wordpress but I have some problems with it …
    When I use this in my post loop , the title of post ( under the thumbnail ) is correct but when I click on it and the new popup window appear , the title of post converts to the title of first post in my website !
    Do you know where is my fault ?
    Here is the code of new popup window ( It’s in the post loop but here I didn’t write it ) :
    http://paste.ubuntu.com/9480853/

  • https://drbn.fr David

    Doesn’t work on mobile with Chrome (but the slideshow works like a charm with swipe left/right).

    • http://codyhouse.co Claudia Romano

      Hi David, actually on mobile it doesn’t expand because it already has width: 100%, and the slideshow is active by default so you can browse the gallery ;)

      • https://drbn.fr David

        Noticed :) UX is nice on desktop with “two columns” layout with expand and smart auto scroll.

  • http://livelymind.net/ Ryan Galbraith

    This is great. Your resources are awesome to learn from and play with, thanks team Cody!

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks Ryan ;)

  • http://christopherschuck.com Chris

    The execution on this is great, but I’m not sure about this from an e-commerce standpoint.
    Do you think this is better than, let’s say thumbnail images that change the primary image?
    You can see it implemented on eBay and Amazon.
    If a product has several alternate images, most users would probably want to click a specific alternate thumbnail instead of cycling through a slideshow.
    I wonder if we replace the dot navigation with alternate thumbnails.

    • http://codyhouse.co/ Sebastiano Guerriero

      I see your point Chris. Replacing the dots with image thumbnails sounds smart, we tried to keep the slideshow as simple as possible because we know most people will integrate a plugin or additional custom javascript. Take in mind this nugget can be used for other websites sections as well, not necessarily a product page.

  • http://www.mrashtonka.com Ashley Tonkin

    Hello i’ve just downloaded this and i have tried to add it to my project but for some reason when i hover over the image the zoom icon is not showing or is the image opacity changing.
    Im using bootstrap and i cant find the problem, can someone please help me out with it.

    • guy

      Ashley, what was the solution to your problem here?

      • M.Petronio

        Hello ! first, great work Claudia it’s really nice stuff here :)
        i had the same problem and you can fix it by adding modernizr.js at the top of your html document !
        it’s because of the css class .no-touch.

  • Nikki

    Hi! Love this example, however, after pulling this code and updating with my own images, the swipe effect is not functioning on the iPad. Is there anything specific I need to change in order to get this to work?
    Thank you!

    • http://codyhouse.co Claudia Romano

      Hi, we used jQuery mobile to implement the swipe function. Make sure you include it in your html file.

  • http://jitendravyas.com/ Jitendra Vyas

    Is it accessible? Can screen reader users get a clue that by clicking on image they can see more images and it will cover the whole page with close button at left top.

  • owlfurty

    When you click the arrow right very fast, after third one it is getting broken.

  • http://allvologda.ru Alexey

    Hi, Claudia! Can you add a price field, quantity field, five star widget, social widgets? Thank you!

  • Bernard Kearney

    Awesome piece of work! What if the image is portrait? How do i set it so that it scales proportionally?

  • Matt

    This is pretty fantastic stuff! Do you have any tips on mirroring the gallery (text on the left, image on the right)? I would be interested in implementing an alternating version of this in a portfolio site. Thank you!

  • http://www.masey.com.au Masey

    Love, love, love this! Thanks so much for coming through with the goods once again Claudia! A couple of questions regarding a couple of usability issues.

    1. Is there an easy way to make the slideshow return to the original (first) slide upon hitting the “X” to close the expanded gallery?

    2. Embedded video works nicely too! Bonus! I just haven’t worked out how to STOP any video playing upon clicking either of the NEXT or PREV or “X” CLOSE expanded gallery links. Can you shed any light on an easy way to do this?

    Thanks so much again!

    • http://codyhouse.co Claudia Romano

      Hi Masey, thanks!
      1. Add prevSlide(container, sliderPagination, 1) to the closing function;
      2. Give a look at how we did it in our Mobile App Introduction Template.
      Hope this helps!

  • aram

    hey to every one i need help to about image gallery source code

    of this

  • mryan

    Have anyone had any issue with performance when zooming image? On some machines and browsers it seems not working smoothly.

  • Tommy

    Hey, this is really great and thank you for demo. Though does anybody know why there are dots and no arrows visible to change the picture when I copied all codes exactly as they are here? (I have white background of images.)

    • http://codyhouse.co Claudia Romano

      Hi, glad you like it! :)
      Make sure to import also the img folder. Hope this helps!

  • dwood

    Is it possible to add captions to the images in the image gallery?

    • http://codyhouse.co Claudia Romano

      Yes, you can add the caption inside the .cd-slider li items (you may need to add some style though).

  • yratof

    If you only have one image, you’re able to swipe to the next image. This causes the .selected class to be removed, leaving you with a mess of overlapping text

    • http://codyhouse.co Claudia Romano

      Hi, in the main.js file (on line 8) add:

      That should fix your problem! I’m going to upload a new version as soon as possible.

  • jenyamakavelli

    cool! but the question is – how do I make when opening images are displayed with a fixed height (100% height)?

  • Pedro Riveros

    Thanks for this amazing feature. Everything works perfectly expect one thing (which the problem is not related to your file). When I click the side buttons, they suddenly go to the top of the page, but that’s because I’m using another feature with list without classes. If I add a class to div in within”.cd-slider-navigation”, how should I modify the main.js.
    Thanks for your feedback

  • Kinex

    I want Expandable Image

  • http://twitter.com/IGLOOSoftware Lucas Lu

    @claudiarrromano:disqus Hi Claudia, can you explain what “cd-slider-active ” means on line 86 of style.scss please? Especially the “&” operator.

    • http://codyhouse.co Claudia Romano

      Hi Lucas,

      is the same as:

      This may help http://sass-lang.com/guide

  • http://urpincode.com/web PINCODE TVM

    Hi
    really nice stuff very helpful.
    I have a question can i exchange the position of info and image (my purpose is to reuse the code to generate a page with left right combination of image and info.
    Is it possible

    • http://codyhouse.co Claudia Romano

      Hi, thanks!
      Yes you can, but you need to change the css a little (for example, the .cd-slider-wrapper should have a margin-left and not a margin-right, and the .cd-item-info should have a left:0 and not a right:0). Hope that helps!

      • Kuriakose Mathen

        Thanks a lot
        let me work on that
        update you soon
        thanks

  • Andrea Colombo

    Hi, thank you for the awesome and really usefull freebie. Is there a way to always make it slide the images automatically?

  • Joey Nelson

    Is there a way to simply open a specific image in the list / gallery from another page?

  • nizarudheen.p

    How do i use multiple gallery on same page

  • marjanbajc

    Hi,

    very nice solution.

    In the demo it swipes only once and then stops. Can anybody provide any help with this? Or have an idea what could be the problem?

    Thanks.

    • http://codyhouse.co Claudia Romano

      Hi there, I just tested it on Chrome and Safari (iOS) and it’s working properly. Are you having this issue with our demo? Which browser/device are you using?Thanks

      • marjanbajc

        Samsung Galaxy s3, Chrome. The first swipe works and then stops.

  • marjanbajc

    Actually, it doesn’t even work. Swipe, I mean.

  • marjanbajc

    Oh man, this would be one of the best image gallery plugins, if you made thumbnails available and lazy loading. But nevertheless, great work!

  • IT Executive SPORTS-LDA

    Hi…
    I wanna create an HTML page having different slides of different category of images…kindly help me to do so…and give me the idea to make high resolution pic with low disc space.

  • Leo Zeron

    Te felicito Claudia me gusta mucho tu trabajo

  • stylerepublic

    Hey Claudia! Is there a way for me to simply use the expanded version on my page? E.g. I don’t need it to open from a smaller image?

    • http://codyhouse.co Claudia Romano

      Hi there, the .cd-slider-active class added to the section.cd-single-item expands the gallery.

      • stylerepublic

        Thank you so much! -B

      • lynette

        Hi Claudia, would you mind to explain a bit more on how I can just use the expanded version on my html? I’m a newbie and am struggling totally ):

        • http://codyhouse.co Claudia Romano

          Hi there, you need to add the cd-slider-active class to the section.cd-single-item. If you are new to html, this should help:
          https://codyhouse.co/free-course/learn-html-and-css/

          Cheers!

          • lynette

            Thank you so much! Another question though: when I included your gallery codes in my html document, it floats in the middle of the page but I would like it to expand till its width hits 100%. Would you know how I can edit the code to make this possible?

  • Eduardo sully

    Hi @romano_cla in your Expandable Image Gallery no @CodyWebHouse I like the hidden and open content only after click

  • Kevin Osorio

    Hello @claudiarrromano:disqus , I love the design of this image gallery. One question though, when the user reloads the page my text seems to load up first and my images a few seconds later pop up. I tried adding the height and width attribute to the img tags to see if the browser can load the image properties first but that threw off the whole design. You have any suggestions?

  • CodersExpo .

    Thanks for this Claudia. I actually changed all the img tags to span in css and main.js. Then embed my playlist of youtube videos instead of thumbnail images.
    With a few adjustments in css, mostly for width/height of the .cd-slider-wrapper and added .cd-slider span iframe it works wonderfully.
    One question though, I had an issue with chrome dealing with display: block; I just took that out from where I define the iframe in the css file and it works fine. Just wondering if anyone else had this issue.

  • Krzysztof Polasik

    @claudiarrromano:disqus Thank you so much for another fantastic solution. However, there’s a challenge I have been struggling with for a long time and I can’t work it out. I’d like to place 2 galleries next to each other (without a div cd-item-info) bearing the two to open fullscreen. Could someone possibly help me fix that? I’d be very grateful for your support.

    Best regards,
    Chris