Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #213610

    Hello.
    Using an Ajax Portfolio Preview, Display Preview Images as Gallery.
    We want to prevent the thumbnails and big_thumb from being links. We disabled the lighbox per http://www.kriesi.at/documentation/enfold/prevent-image-or-link-from-opening-in-a-lightbox/ , but the thumbnails open the image file in a new window. We want to disable the link on the thumbnails and retain the mouse-over-to-fake-lightbox functionality. The thumbnails and big_thumb should not open or link anywhere, but simply display in the fake lightbox area.
    Seems like it should be in /config-templatebuilder/avia-shortcodes/gallery.php around line 218… but I can’t remove the link without disabling the mouse-over.

    #213651

    Hey redpupmedia!

    Edit config-templatebuilder > avia-shortcodes > gallery.php, find this code on line 212:

    $output .= "<a class='avia-gallery-big fakeLightbox $imagelink $crop_big_preview_thumbnail' href='".$link[0]."' data-onclick='1' title='".$description."' ><span class='avia-gallery-big-inner' $markup_url>";
    							$output .= "	<img src='".$prev[0]."' title='".$title."' alt='".$alt."' />";
    			   if($caption) $output .= "	<span class='avia-gallery-caption'>{$caption}</span>";
    							$output .= "</span></a>";

    Replace it with:

    $output .= "	<img src='".$prev[0]."' title='".$title."' alt='".$alt."' />";
    			   if($caption) $output .= "	<span class='avia-gallery-caption'>{$caption}</span>";

    And this code on line 216:

    
    $thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
    

    Replace it with:

    
    $thumbs .= " <img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' />";
    

    Add this on Quick CSS to retain the cursor. Remove browser cache then reload the page.

    .avia-gallery {
    cursor: pointer;
    }

    Best regards,
    Ismael

    #213705

    Thanks for the quick reply.

    I’ve made the changes as described and the thumbnails are no longer links, but they are 80×80 images that are being stretched to 684×685 and do not display in the Fake Lightbox.
    dev site: http://paradigm.redpupmedia.com

    #214209

    Hi!

    Please add following code to Quick CSS as well

    #top .portfolio-preview-image .avia-gallery-thumb img { height: 80px;
    width: 80px;
    }

    Best regards,
    Yigit

    #214559

    Hi.

    Thanks. That fixed the image size issue.
    But the thumbnails are not displaying in the fake-light-box (big-thumb?).

    #214737

    Hi!

    Can you please give us the link to the page with the gallery? I don’t see the navigation on the home page.

    Best regards,
    Ismael

    #214875

    Thanks.
    Its on the home page. Under the Projects heading.
    (this is a single page site; we have removed the navigation.)

    #214941

    Hi!

    Please reset the changes that we made then edit js > shortcodes.js, find this code on line 1007:

    
    gallery.find('.avia-gallery-thumb a').eq( this.getAttribute("data-onclick") - 1).trigger('click');
    

    Replace it with this code to remove the lightbox trigger.

    
    gallery.find('.avia-gallery-thumb a').eq( this.getAttribute("data-onclick") - 1);
    

    Edit config-templatebuilder > avia-shortcodes > gallery.php, find this code on line 218:

    
    $thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
    

    Replace it with:

    
    $thumbs .= "<a data-prev-img='".$prev[0]."'><img data-rel='gallery-".self::$gallery."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url {$tooltip} src='".$img[0]."' alt='".$alt."' /></a>";
    

    Last, add this on Quick CSS:

    
    .avia-gallery-big .image-overlay.overlay-type-image {
    	display: none !important;
    }
    

    Remove browser cache then reload the page a few times.

    Regards,
    Ismael

    #215475

    Perfect!
    Incredible support! Thank-you very much!
    One last ?: I’m using a child theme, is it possible upgrade-proof these changes, as they were made directly in the parent theme?

    #215478

    Hi!

    If you want a less invasive solution you can deactivate the links with css code – insert

    
    .portfolio-preview-image .avia-gallery a{ pointer-events: none; } 
    

    into the quick css field and this code should deactivate all gallery links without any additional theme code adjustments.

    Best regards,
    Peter

    #215481

    Thanks Peter. That solution prevents the small thumbnails from displaying in the ‘fake lightbox/Big-Thumb’. I still want that functionality, but not the pop-over light box (fancy box).

    The invasive option works perfect. I am just looking for a way to hook into that via the child theme to prevent update issues.

    #216286

    Hi!

    Unfortunately it makes no sense to overwrite the shortcode.js file with a child theme because we update this file very often. So if you want to solve this issue with a child theme you must choose the less invasive approach :)

    You can try following css code – it will just affect the big image

    
    .portfolio-preview-image .avia-gallery a.avia-gallery-big{ pointer-events: none; }
    

    Regards,
    Peter

    #222295

    I think my case is similar. I have a ajax portfolio grid-gallery. I added this line to custom.css:
    .portfolio-preview-image .avia-gallery a.avia-gallery-big{ pointer-events: none; }
    which stops the big picture from displaying the lightbox.

    On the thumbnails, I want to disable the lightbox and change the pointer to be an arrow instead of a hand. When you move your mouse over the thumbnail I still want it to display the thumbnail picture as the big picture. Do I need to make the changes mentioned in post #214941?

    Thank you for your great support!

    #222663

    Hey!

    You could select the “Don’t show the images at all and display the preview text only” option: http://www.clipular.com/c/6453051829256192.png?k=5TIdSdjsRn87CQytVuQeUU4899A

    By going this way Enfold will stretch the content area of the ajax preview to 100% width and you can use the new space to build your custom layout. I.e. use the gallery shortcode to build the layout/template you requested in your post (select “Use Lighbox” – “No, don’t add a link to the images at all”).

    Best regards,
    Peter

    #222872

    Thanks for your support. I changed the the portfolio items “ajax preview images” to an “image list” (i only have 1 picture anyway). So when I use the ajax portfolio grid on my projects page, I want to disable the lightbox. Is there a line like the following that works w/ the “image list” option?
    .portfolio-preview-image .avia-gallery a { pointer-events: none; }

    Thanks again!

    #223484

    Hey!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    #top .portolio-preview-list-image { pointer-events: none!important; }

    Regards,
    Yigit

    #232830

    Hi! I just wanted to say I am new to Enfold and I wanted this same functionality and your edits work brilliantly Yigit. This is a great forum topic, thank you!

    I feel as if this topic should be highlighted as I imagine there are many users (for example the user who posted item #227928 on forum) who probably would like the gallery with thumbnails to perform without the full lightbox opening up on mobile browsers / ipads / etc. rather they would prefer to have the image appear in the “fake” lightbox window when you click on thumbnail.

    Thanks for listening!
    Linda

    #233084

    Hi!

    Glad we could help. You can request it here: http://www.kriesi.at/support/topic/enfold-feature-requests/

    Closing the thread now.

    Cheers!
    Ismael

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

The topic ‘Remove link from thumbnails in Portfolio Gallery’ is closed to new replies.