Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 12, 2013 at 6:55 pm #187411
    JaredBurnett

    I want to create a gallery almost identical to this http://adamelmakias.com/portfolio/press/ with a set number of columns that display high quality square thumbnails of the same size and are flush together. You click on a thumbnail and it opens the lightbox and you can key though the images.

    How can I achieve this? I tried the fullwidth masonry gallery and set the thumbnails to the same size. It wasn’t quite square thumbnails and I don’t want the gallery to be full width. I want there to be a small margin on each side of the page. Is there a way to achieve the same look from the website above using a grid gallery? I don’t want borders on the pictures.

    A dimming feature of the other images that the mouse is over would be cool too.

    Thanks for your help!

    November 13, 2013 at 1:57 pm #187736
    Yigit

    Hey JaredBurnett!

    You can add Gallery element under Media elements in Avia Layout Builder and add following code to Quick CSS in Enfold theme options under Styling tab to remove borders and padding

    #top div .avia-gallery img { border-style: none; padding: 0px; }

    And this css code to increase opacity and remove animation

    .avia_transform .avia-gallery-thumb img { opacity: 1; }
.avia_transform .avia-gallery-thumb img.avia_start_animation { -webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none; }

    Regards,
    Yigit

    November 14, 2013 at 5:45 pm #188459
    JaredBurnett

    The first code makes it look great with square thumbnails, however the second code doesn’t seem to make any difference from before.

    Is there any way to make it slightly dim the other pictures that the mouse is not over?

    November 14, 2013 at 5:57 pm #188463
    Yigit

    Hey!

    1) Can you post the link to your website?
    2) All pictures could have lower opacity and on hover could be opacity 1, with following code

    #top .avia-gallery .avia-gallery-thumb a:hover { opacity: 1; }
#top .avia-gallery .avia-gallery-thumb a { opacity: 0.5; }

    But if you would like to have it just like it is on the website you have posted, then you are going to need to hire a freelance developer for that kind of customization as it is beyond the scope of support we can provide. You can request quote here.

    Best regards,
    Yigit

    November 14, 2013 at 6:53 pm #188504
    JaredBurnett

    1) here is the page I am testing http://www.jaredburnettphoto.com/test-gallery/

    2) That code is pretty awesome. I made it .75 opacity to tone down the contrast slightly.

    I can’t really think of any way to make it better. Any suggestions from a design standpoint?

    November 14, 2013 at 6:59 pm #188506
    Yigit

    Hi!

    You can change following code to .75 as well if you would like to change “dimmed at first” kind of effect

    .avia_transform .avia-gallery-thumb img {
opacity: 0.1; }

    Regards,
    Yigit

    November 14, 2013 at 7:07 pm #188508
    JaredBurnett

    I didn’t see any difference that code made.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Gallery with 4 columns of thumbnails flush together.’ is closed to new replies.