Basically when you hover over a smaller image you will see it enlarged where the big photo is. They would also like the small images to scroll left and right like a slider. I am sure there is a jQuery plugin for something like this but I do not really know where to start.
Eventually each block of images will be referring to a particular portfolio piece and will link to an individual page showing the portfolio images in full.
That's tricky with the layout you have now. Personally, I wouldn't use arrows for the smaller images. Maybe something like when you click on the third image, it automatically slides to the next set. When it gets to the last one and it is clicked, it slides all the way back to the first set.
Trust me, I have tried to convince the client otherwise but there isn't really room for manoeuvre on this one. Not really sure where to look for coding this
If they're absolutely sold on this, the best way to do it I think would be to make 3 separate sliders with thumbnail carousel navigation. NivoSlider does this pretty well out of the box, and is fairly easy to style / edit.
Is there not a simple way of making thumbnails fill a bigger space? Like this: http://www.esprit.nl/women/kleding/bloezen/effen - If you hover over a small thumbnail it replaces the larger image
Thanks @pixelgrid - As i'm using WordPress im assuming I am going to have to include the css in the page theme php file as I need to add the images dynamically?
Hi guys,
I have a client that is sold on the idea of having the following portfolio page: http://allyouneedis-justask.com.s156312.gridserver.com/make-up/
set up like the following:
http://i.imgur.com/l70RMMR.png
Basically when you hover over a smaller image you will see it enlarged where the big photo is. They would also like the small images to scroll left and right like a slider. I am sure there is a jQuery plugin for something like this but I do not really know where to start.
Eventually each block of images will be referring to a particular portfolio piece and will link to an individual page showing the portfolio images in full.
Help
That's tricky with the layout you have now. Personally, I wouldn't use arrows for the smaller images. Maybe something like when you click on the third image, it automatically slides to the next set. When it gets to the last one and it is clicked, it slides all the way back to the first set.
Trust me, I have tried to convince the client otherwise but there isn't really room for manoeuvre on this one. Not really sure where to look for coding this
If they're absolutely sold on this, the best way to do it I think would be to make 3 separate sliders with thumbnail carousel navigation. NivoSlider does this pretty well out of the box, and is fairly easy to style / edit.
Is there not a simple way of making thumbnails fill a bigger space? Like this: http://www.esprit.nl/women/kleding/bloezen/effen - If you hover over a small thumbnail it replaces the larger image
this is a pure css approach http://codepen.io/pixelgrid/pen/axKiH . however to achieve the last link's result you will need some jquery
Thanks @pixelgrid - As i'm using WordPress im assuming I am going to have to include the css in the page theme php file as I need to add the images dynamically?
you just have to make the markup in wordpress(create the divs ) and include the css to your stylesheet