user profile image

Nice responsive gallery with:

β–ͺ CSS columns β–ͺ roll over, hover caption

β–ͺ Magnific Popup script β–ͺ Zoom in effect

β–ͺ Haml & Sass & CoffeeScript



  1. Hi. love your gallery! i would like to use it on my web (i'm not a developer) how do i change the course for pictures as it is set for online not local folder? many thanks Radek

  2. @Radek_K Hi. You need to change src and href attributes into something like "/images/image-1.jpg" if your images are in a local "images" folder. Src attribute is a miniature image source and href is a big image link.

  3. Thank you very much! I was trying to change it but neve get the slider. I’m only changing html code right? Sorry to bother you with such basic stuff 😬

  4. @Radek_K Yes, you don't have to change anything in CSS or JS. Just HTML. To make slider work, you will have to change href attributes for all images (A, anhor elements), because slider depends on those values.

  5. Brilliant! Will have a go again πŸ˜‰

  6. Forgot to ask you! Is it possible that every picture has its own gallery? So the picture in the layout is essentially thumbnail?

  7. @Radek_K https://codepen.io/harconst/pen/wBNbNx – this is not the best solution, better to use some javascript object with urls and titles for images, but it works

  8. Oh ok. Thank you for that. Will try . Nevertheless your gallery is really cool 😎 Thank you again for getting back to me.

  9. Hi there! Love your gallery! But there is a little problem... When I click on an image while on my mobile phone the direct link opens and I see a big picture that doesn’t match the screen. You can see it if you drag and minimize the browser window to the size of a mobile phone. How can I fix it?

  10. Hi @Volgosky! Because I didn't have time to adjust it for mobiles it's disabled. Please just remove disableOn option.

  11. @mican It's that possibile that the visualization on the browser is not in the same order of the images in the code? The main issue is that I can't visualize the images in the order I choose.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.