Grow your CSS skills. Land your dream job.

Portfolio page on WordPress – best way to approach

  • # March 4, 2013 at 1:48 pm

    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

    # March 4, 2013 at 2:03 pm

    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.

    # March 4, 2013 at 2:34 pm

    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

    # March 4, 2013 at 2:57 pm

    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.

    # March 4, 2013 at 5:58 pm

    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

    # March 4, 2013 at 8:06 pm

    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

    # March 5, 2013 at 4:09 am

    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?

    # March 5, 2013 at 8:23 am

    you just have to make the markup in wordpress(create the divs ) and include the css to your stylesheet

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".