Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #981305

    Hi,

    For certain galleries, I chose “Big image with thumbnails below”.

    I would like to make the following three modifications:

    1. Remove the transparent white overlay of the thumbnails when you hover on them.

    (I already removed the transparent white overlay of the big image by referring to the following post, but this had no effect on the thumbnails below the big image: (Purchase code hidden if logged out) -and-arrow-on-hover/”>https://kriesi.at/documentation/enfold/image/# (Purchase code hidden if logged out) -and-arrow-on-hover/)

    2. Disable the feature of changing the big image to the image of the thumbnail when hover on the thumbnail.

    3. Remove the first thumbnail (thumbnail of the big image) so there’re only the thumbnails of the other images of the gallery below the big image visible.

    Best regards,
    zizibe1

    #981959

    Hey zizibe1,

    Thank you for using Enfold.

    1.) You can use this css code to set the opacity of the thumbnail on hover.

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

    2.) Do you need the galleries to open the lightbox? If you don’t need the lighbox, you can use this css code.

    #top #wrap_all .avia-gallery a {
        pointer-events: none;
    }

    If lightbox is still needed, you have to edit the gallery script directly.

    3.) Use this css code to remove the first thumbnail.

    #top #wrap_all .avia-gallery .avia-gallery-thumb a:nth-child(1) {
        display: none;
    }

    Best regards,
    Ismael

    #982621

    Hi Ismael,

    1. The code works fine. Thank you very much.

    2. The code works, but yes, I still need the galleries to open the lightbox. Now they don’t anymore. How do I have to edit the gallery script directly?

    3. The code works , but now, I have the following problem:

    The first gallery on my page “Portfolio” contains only two images which I want to show next to each other and aligned center of the page. There, I chose “Gallery Style: Small Thumbnails” instead of “Big image with thumbnails below”. Now, because the fist thumbnail is removed, the first of the two images isn’t visible either.

    I considered to replace the gallery by two image elements next to each other (Link Settings: Lightbox), but if I wanted them to align center of the page, they would be either too big or too small.

    – images too big:
    1/2 Layout Element with first image in it | 1/2 Layout Element with second image in it

    – images too small:
    1/4 Layout Element | 1/4 Layout Element with first image in it | 1/4 Layout Element with second image in it | 1/4 Layout Element

    Now in the gallery, the two images are aligned center of the page and are just the right size.

    – right image size:
    1/5 Layout Element | 3/5 Layout Element with Gallery in it | 1/5 Layout Element

    That’s the reason I would like to keep the gallery.

    Is there a way to except the first gallery on my page “Portfolio” of the rule which removes the first thumbnail? Or do you find another solution?

    Best regards,
    zizibe1

    #983950

    Hi,

    2.) If you need the lightbox to work, edit the config-templatebuilder > gallery > gallery.js file and then comment out or remove this block of code.

    gallery.on('mouseenter','.avia-gallery-thumb a', function()
    {
    	var _self = this;
    
    	big_prev.attr('data-onclick', _self.getAttribute("data-onclick"));
    	big_prev.height(big_prev.height());
    	big_prev.attr('href', _self.href)
    
    	var newImg 		= _self.getAttribute("data-prev-img"),
    		oldImg 		= big_prev.find('img'),
    		oldImgSrc 	= oldImg.attr('src');
    
    	if(newImg != oldImgSrc)
    	{
    		var next_img = new Image();
    		next_img.src = newImg;
    
    		var $next = $(next_img);
    
    		if(big_prev.hasClass(' (Purchase code hidden if logged out) -thumb'))
    		{
    			$next.css({'height':big_prev.height(),'width':'auto'});
    		}
    
    		big_prev.stop().animate({opacity:0}, function()
    		{
    			$next.insertAfter(oldImg);
    			oldImg.remove();
    			big_prev.animate({opacity:1});
    
    			big_prev.attr('title',$(_self).attr('title'));
    
    		});
    	}
    });
    

    3.) You should turn on the custom css class field so that you can apply the code to a specific gallery or element.

    // https://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) /# (Purchase code hidden if logged out)(Purchase code hidden if logged out)

    Best regards,
    Ismael

    #984230

    Hi Ismael,

    Thank you for your reply.

    2.) I opened FileZilla and connected to my server.

    I went to wordpress > wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > gallery and moved the gallery.js file to my desktop. (In wordpress > wp-content > themes > enfold child, I couldn’t find this file.)

    There, I opened it with TextEdit (I also have Adobe Dreamweaver on my macbook but never used it so far), removed the block code you wrote about in your post, saved the file and moved it back to the gallery folder on the server (Action: Overwrite).

    Then I went to the page “Portfolio” of my website, pressed shift and the reload button of Chrome, but unfortunately, the lightbox of the gallery still doesn’t work.

    3.) Referring to your link, I turned on the custom css class field.

    Now when I go to “Pages” > my page “Portfolio” > my first gallery > “Edit element” and scroll down, I see the “Custom CSS Class” field.

    What do I have to add there to except this gallery of the rule which removes the first thumbnail?

    Best regards,
    zizibe1

    #984422

    Hi,

    2.) Did you remove the previous css code that we suggested? The pointer-events is probably set to “none”. You need to purge the cache or do a hard refresh after removing the css code.

    3.) Add a unique id or class in the gallery’s custom css class field. Use “custom-gallery” without quotes for example and then replace the previous modification with the following css code.

    #top #wrap_all .custom-gallery .avia-gallery-thumb a:nth-child(1) {
        display: none;
    }

    We replaced the generic or default “.avia-gallery” selector with the custom css class attribute/selector “.custom-gallery”.

    Best regards,
    Ismael

    #984910

    Hi Ismael,

    Thank you for your reply.

    2.) That’s it. I removed the css code you suggested in your first post. Now, the lightbox of the gallery works.

    3.) Now, it works fine. I replaced the code of your first post by the code of your last post in Quick CSS. Then I added “custom-gallery” without quotes to the custom css class field of each gallery where I wanted to hide the first thumbnail.

    Although I chose “No Scaling (Original Width X Original Height)”, the big image of the gallery is not as sharp as the same image opened in a lightbox or added to a image media element . How can I fix this?

    Best regards,
    zizibe1

    #985091

    Hi,

    Thanks for the update.

    The image in the gallery is resized down a bit — around 14px — because of the padding property. Add this css code to remove the gallery padding.

    #top div .avia-gallery .avia-gallery-big {
        padding: 0;
    }

    Best regards,
    Ismael

    #985121

    Hi Ismael,

    Thank you for your reply.

    I added the code to Quick CSS, but unfortunately, the big image of the gallery still is blurry.

    Edit: There is a further problem. The big image should be left-aligned and right-aligned to the thumbnails below. When you remove the gallery padding, the big image is wider then the thumbnail row below. Moreover, the white space between the big image and the thumbnails is smaller then the white space between the thumbnails. When you remove the padding of the thumbnails too, the white space between the image and the thumbnails is missing.

    Best regards,
    zizibe1

    • This reply was modified 1 month ago by  zizibe1. Reason: further problem
    #985809

    Hi,

    Thanks for the update.

    Add the following css codes to adjust the padding of the thumbnails.

    #top div .avia-gallery a:last-child img {
        padding-right: 0;
    }
    
    #top div .avia-gallery a:nth-child(2) img {
        padding-left: 0 !important;
    }

    Best regards,
    Ismael

    #986152

    Hi Ismael

    Thank you for your reply.

    I added the code to Quick CSS.

    a) Now the white space between the big image of the gallery and the thumbnails below is too thin.

    b) When there are more than two thumbnails below the big image of the gallery, they don’t have the same size.

    c) The big image of the gallery still is slightly blurry.

    Best regards
    zizibe1

    #986709

    Hi,

    Thanks for the update.

    Do you have a larger version of the image? Please remove the previous css codes and then upload a larger image to make it look sharper in the page.

    Best regards,
    Ismael

    #987089

    Hi Ismael

    Thank you for your reply.

    a) I found the mistake. I had the following code in my Quick CSS:

    /* no border around gallery thumbnails */
    #top div .avia-gallery img {
        border-style: none;
        padding-top: 0px;
    }

    I removed “padding-top: 0px;”. Now the white space between the big image of the gallery and the thumbnails below is the right size.

    b) I removed the code you’ve mentioned in your previous post. Now the thumbnails below the big image are all the same size.

    But now the big image isn’t left-aligned and right-aligned to the thumbnails below anymore. Now the big image is wider then the thumbnail row below. It’s the same problem I’ve already described above in my post of July 13, 2018 at 12:08 pm, #985121.

    c) Yes, I have a larger version of the image.

    The original details of the image are:
    File type: image/jpeg
    Dimensions: 5000 × 3333 px
    File size: 18.2 MB

    Here are the details of the uploaded image which is blurry:
    File type: image/jpeg
    Dimensions: 1200 × 800 px
    File size: 356 KB

    What file size would you recommend to get a sharp but still fast-loading image?

    I’ve read online that the file size should be smaller than 200 KB because of the visitors of the website who have a slow internet connection. Is that true?

    Best regards
    zizibe1

    #987357

    Hi,

    b.) You should remove this css code because it doesn’t seem to help in making the image sharper.

    #top div .avia-gallery .avia-gallery-big {
        padding: 0; 
    }

    It will re-align the main image and the gallery thumbnails.

    What file size would you recommend to get a sharp but still fast-loading image?

    c.) You should consider the standard screen resolutions when deciding what image size to use.

    // https://www.w3schools.com/browsers/browsers_display.asp

    Best regards,
    Ismael

    #988406

    Hi Ismael,

    Thank you for your reply.

    b.) I removed the code to re-align the main image and the gallery thumbnails. It worked fine.

    c.) I uploaded the largest version of the jpg:

    File size: 9 MB
    Dimensions: 5208 × 3648

    Unfortunately, the big image of the gallery still is blurry. In the lightbox, the image is sharp no matter I uploaded the smaller or the larger version.

    So I tried this workaround:

    Instead of a gallery, I used a “1/1 Layout Element”, added an “Image Media Element” to it, inserted the jpg (1200 × 800 px, 356 KB). Now, the image is sharp. I also activated the lightbox ( Edit Element > Link Settings > Image Link > Lightbox).

    Below, instead of the two thumbnails, I added two 1/2 layout elements, added an “Image Media Element” to each of it, inserted a jpg (1200 × 800 px) to each of it and activated the lightbox.

    Now I would like to:

    – align the first image to the two images below
    – reduce the white space between the first image and the two images below
    – reduce the white space between the second and the third image

    How can I achieve this?

    Best regards,
    zizibe1

    #988547

    Hi,

    Thanks for the update.

    I have applied a unique css class attribute to the columns and then added these css codes on the Quick CSS field.

    .avia-image-container-inner, .avia_image, .av-image-caption-overlay {
        width: 100%;
    }
    
    div .av_one_half.truck-column-1 {
        width: 49%;
        margin-left: 0;
        margin-top: 2%;
    }
    
    div .av_one_half.truck-column-2 {
        width: 49%;
        margin-left: 2%;
        margin-top: 2%;
    }

    Best regards,
    Ismael

    #989220

    Hi Ismael,

    Thank you very much for your support. Now, the white space between the images looks much better to me .

    Because I wanted to reduce the white space a little bit more, I changed the parameters of your code like this:

    First column:
    width: 49.5%
    margin-left: 0
    margin-top: 1%

    Second column:
    width: 49.5%
    margin-left: 1%
    margin-top: 1%

    Now, the white space between the images looks alright to me.

    Back to the image sharpness. I think I might have figured something out. I went to the portfolio page of my website and measured the size of the big image by pressing “shift + cmd + 4” on my MacBook. Then I cropped the original image exactly to this size in Photoshop. If the big image is one or two pixels larger or smaller then the measured size, it looks slightly blurry, but if the big image is exactly the measured size, it looks sharp.

    In my case, the ideal image sizes are:

    Gallery:
    Big image 1196 × 798 px

    Image Media Element:
    Big image 1210 × 806 px

    But now, I have an issue concerning the lightbox of the “Image media Element”. The image in the lightbox is resized down a little bit which makes it look slightly blurry. How can I adjust the lightbox so the image isn’t resized down anymore?

    Best regards,
    zizibe1

    #989508

    Hi,

    On my screen (1920x1080px), full size (1196×798px) of the image is displayed inside the lightbox container.

    Best regards,
    Ismael

    #989803

    Hi Ismael,

    Thank you for your reply.

    On my screen (2560 × 1440 px), the full size of the image is:

    Original image: 1196 × 798 px
    Gallery: 1196 × 798 px -> image sharp
    Lightbox of Gallery: 1196 × 798 px -> image sharp

    Original image: 1210 × 806 px
    Image Media Element: 1210 × 806 px -> image sharp
    Lightbox of Image Media Element: 1199 × 799 px -> image blurry

    How can I adjust the lightbox of the “Image media Element” so the image isn’t resized down?

    Best regards,
    zizibe1

    #991354

    Hi,

    I’m not sure why it resizes like that. I inspected the markup and found nothing. Please resize the image to exactly 1199x799px. It’s barely noticeable on my end.

    Best regards,
    Ismael

    #992441

    Hi Ismael,

    Thank you for your reply.

    I resized the image to exactly 1199 × 799 px and uploaded it.

    Here are the results:

    Original image: 1199 × 799 px
    Image Media Element: 1210 × 806 px -> image blurry
    Lightbox of Image Media Element: 1199 × 799 px -> image sharp

    Now, it’s the other way round: The image displayed in the Image Media Element is slightly blurry while the same image displayed in the Lightbox of the Image Media Element is sharp. As you see, the Image Media Element displays the image bigger than the lightbox. This effects the sharpness of the image.

    As a designer, the sharpness of the images is very important to me because I want to present them to my clients with the highest quality possible. So the Media Element and the Lightbox of the Image Media Element should display the image the same size.

    How can I fix this?

    Best regards,
    zizibe1

    #992727

    Hi,

    Try to decrease the “Maximum Container width” value in the Enfold > General Layout > Dimension panel.

    Best regards,
    Ismael

    #993727

    Hi Ismael

    Thank you for your reply.

    I decreased the “Maximum Container width” value. The problem is that this effected not only the Image Media Element, but also the big image of the gallery.

    Here are the results:

    “Maximum Container width value”: 1299 px

    Original horizontal image: 1199 × 799 px
    Image Media Element: 1199 × 799 px -> image sharp
    Lightbox of Image Media Element: 1199 × 799 px -> image sharp
    Big image of gallery: 1185 × 791 px -> image blurry
    Lightbox of Gallery: 1199 × 799 px -> image sharp

    Original big vertical image: 705 × 1000 px
    Big image of gallery: 676 × 959 px -> image blurry
    Lightbox of Gallery: 705 × 1000 px -> image sharp

    Therefore I removed the css code and went back to my original settings:

    “Maximum Container width” value: 1310 px

    Original horizontal image: 1196 × 798 px
    Big image of gallery: 1196 × 798 px -> image sharp
    Lightbox of Gallery: 1196 × 798 px -> image sharp

    Original big vertical image: 682 × 962 px
    Big image of gallery: 682 × 964 px -> image almost sharp
    Lightbox of Gallery: 682 × 962 px -> image sharp

    Now the galleries come pretty close to be okay.

    As for the blurry Image Media Elements, I think I’ll replace them all by galleries and choose “Big image with thumbnails below” even if there are no thumbnails. Nobody will find out if there’s an Image Media Elements or a gallery. The main point is that all the images are sharp.

    Or do see another solution?

    Best regards,
    zizibe1

    #994197

    Hi,

    I’m running out of ideas here. I’ll ask the rest of the team to check.

    Best regards,
    Ismael

    #995008

    Hi Ismael

    Thank you for your reply.

    Okay, if somebody of your team has another idea, I’m looking forward to hearing from you.

    In the meantime, I’ll replace all Image Media Elements by galleries.

    Best regards,
    zizibe1

    #996149

    Hi,

    Did it worked if the Media Elements work?

    Best regards,
    Basilis

    #996187

    Hi Basilis,

    Thank you for your reply.

    No, unfortunately not.

    When the image displayed in the “Image Media Element” and in the “Lightbox of Image Media Element” was sharp, the big image of the gallery was blurry, see my second last reply (#993727).

    No matter which setting I chose up to now, always one or several of the horizontal or vertical images displayed in the following media elements were blurry:

    – Image Media Element
    – Lightbox of Image Media Element
    – Gallery
    – Lightbox of Gallery

    No matter which setting I used, always one of these media elements varied in size. Already a slight difference of a few pixels made the image look blurry.

    Best regards,
    zizibe1

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

You must be logged in to reply to this topic.