Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 2, 2013 at 3:26 pm #195288
    eliuserman

    Hello

    Concerning the Gallery (Media Element):
    1. Is it possible to have the thumbnails on the right to the main image (instead of below it)?
    2. Is it possible to have sub sections for the Gallery content (2 different families of images in the same gallery)

    Sorry for providing an outsource example, but just to make it clearer, please take a look at the following gallery:
    http://www.dedon.de/en/collections/detail/collection/leaf-15/beach-chair-xs-125/seagrass-13.html
    (2 families on the right side: Products and Gallery)

    Thanks

    December 2, 2013 at 8:22 pm #195459
    Yigit

    Hi eliuserman!

    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 also request quote here.

    Best regards,
    Yigit

    December 3, 2013 at 8:58 am #195676
    eliuserman

    Hi Yigit
    Is that right for both my requests (as a start I would like to solve at least one and then find budget a developer)
    Thanks
    Eli

    December 3, 2013 at 9:47 am #195702
    Ismael

    Hey!

    1.) I think number 1 is doable. Add this on your custom.css or Quick CSS:

    #top div .avia-gallery .avia-gallery-big {
width: 80% !important;
min-height: 590px !important;
float: left;
clear: none !important;
}

#top div .avia-gallery .avia-gallery-big img {
min-height: 570px;
}

    2.) You need to hire someone like Yigit said for number 2.

    Regards,
    Ismael

    December 3, 2013 at 11:42 pm #195914
    eliuserman

    Hi Ismael, thanks very much for the code!

    It works partially since the thumbnails are not listed in one column (I think); You can take a look here:
    http://numlighting.com/portfolio-item/prova-4
    If you are asked for password, then numnum is the one

    I’ll soon ask for a quote for the other issue…

    Thanks again
    Eli

    December 4, 2013 at 10:04 am #196026
    Ismael

    Hey!

    Please try this:

    #top div .avia-gallery .avia-gallery-big {
width: 80% !important;
min-height: 921px !important;
float: left;
clear: none !important;
}

#top div .avia-gallery .avia-gallery-big img {
min-height: 905px;
}

    Cheers!
    Ismael

    December 4, 2013 at 11:36 am #196101
    eliuserman

    Bravo Ismael !
    :)
    I have made some small changes in your code:

    #top div .avia-gallery .avia-gallery-big {
width: 71% !important;
min-height: 500px !important;
float: left;
clear: none !important;
}
//#top div .avia-gallery .avia-gallery-big img {
min-height: 525px;
}//

    1. I have changed the width % to fit with 2 columns of thumbnails
    2. Changed the height to fit a better layout
    3. I disabled the second part of your code since the images were losing the right proportion when stretching the browser width

    One annoying thing is the thumbnails size; Even before the last changes, I could not see any different when playing with the relevant values of the Gallery panel control; It seems that the size it defined by the number of columns only (and how could it be defined now, after the last changes?)

    Thanks again!

    December 4, 2013 at 11:50 am #196103
    eliuserman

    Hi Ismael, now I understand better your solution: you define a big value for the height so all the thumbnails will take the left size by the Float definition (and hoping that the quantity of the thumbnails won’t exceeds the height of the main image…); I think it is problematic when changing the browser size in other devices: now the image keeps its right proportion, but the frame keeps the big height value…

    I’m a designer which means that I think slowly when it is about code… :)

    December 6, 2013 at 9:50 pm #197118
    Josue

    Hi!

    I think it would be better to revert it when viewed in a mobile device:

    @media only screen and (max-width: 767px) {
    #top div .avia-gallery .avia-gallery-big{
        width: 100% !important;
        min-height: 0 !important;
    }
}

    Best regards,
    Josue

    December 7, 2013 at 7:20 pm #197392
    eliuserman

    Josue, thanks!
    mmm… but the code changed nothing: http://numlighting.com/portfolio-item/prova-4 (password: numnum)

    December 7, 2013 at 10:13 pm #197446
    Josue

    Hey!

    Put it at the very end of Quick CSS, the result should be this:

    Cheers!
    Josue

    December 7, 2013 at 11:23 pm #197457
    eliuserman

    Josue, that’s what I tried at the first time… now it works! Thanks!!

    December 7, 2013 at 11:32 pm #197462
    Josue

    You are welcome, glad we could help :)

    Regards,
    
Josue

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Gallery’ is closed to new replies.