Portfolio Slider - Thumbnail zoom/Link

FestoonMedia · September 2015

Hi Support team,

We need to disable the Zoom(Enlarge) option when clicking on the Magnifying glass icon in the portfolio slider.

Only require the thumbnail to be clickable so it goes into the inner page. Kindly help.

To make it more clear see this demo page: http://themes.muffingroup.com/be/portfolio/
When we hover over thumbnails we get Magnifying Glass and Link icon. How to disable/remove the enlarge image option.

Albert · September 2015

Hi,

you can remove this enlarge option with below css:

.image_frame .image_wrapper .image_links a.zoom { display: none !important; }
.image_frame .image_wrapper .image_links a.link { width: 100% !important; }

atlakeem · September 2015

hey there, i was able to remove both icons with the help of the css you provided, but what would be the css for removing the blue popup completely?

FestoonMedia · September 2015

@ BeTheme Support (Muffin Group)...thanks a lot!

Also for other users who may be viewing this post.. you simply have to paste the code in the following location in dashboard > Appearance > Edit CSS section and Save it.

FestoonMedia · September 2015

@atlakeem

you can try adding this code to remove the background behind the icons..works for me.

.image_frame .image_wrapper .image_links {
background: none;
}

Albert · September 2015

@atlakeem The css, @FestoonMedia gave you should work.

atlakeem · September 2015

@muffingroup @FestoonMedia, thanks for this. now for the pic that pops up, is that what is known as PrettyPhoto? i haven't seen much info on it in the betheme documentation

Albert · October 2015

@atlakeem For popups is responsible popup shortcode.

leoniegabriella · October 2016

Hey there! I don't understand where to place this CSS code? When I click style.css & open the style-sheet, I see:

/*

Theme Name: Betheme

Author: Muffin group

Description: The biggest WordPress Theme ever

Theme URI: http://themes.muffingroup.com/betheme

Author URI: http://muffingroup.com

License: Themeforest Split Licence

License URI: -

Version: 14.9

All css files are placed in /css/ folder

*/

Where should I add the code? (This one below I mean) THANKS! :-)

.image_frame .image_wrapper .image_links a.zoom { display: none !important; }
.image_frame .image_wrapper .image_links a.link { width: 100% !important; }

Albert · October 2016

@leoniegabriella Each custom css need to be put under Theme options > Custom CSS & JS > Custom CSS section. There is no need to modify theme files.

aspacelot · February 2017

Hi – I tried the code above and it did remove the search icon but also want to disable the image zoom in the background on hover. How do I do that?

Albert · February 2017

@aspacelot Please send us link to page/s where you would like to do above modification first so we can have a look on it first.

darius9000 · March 2017

i want to do the oposite. i want to remove link and leave the magnifier. i did that in theme-functions.php but still there is a blank box after the box with magnifier.

Bryan · March 2017

@darius9000 You have the blank box since you need to use CSS. Send us a link to your page.

Bryan · April 2017

@aspacelot use this css

.if-overlay .image_frame:hover {
	transform:scale(1.0) !important;
}

Portfolio Slider - Thumbnail zoom/Link

Comments