Remove hover preview from index/gallery « Support Forum | Kriesi.at

Support Forum » Expose

Remove hover preview from index/gallery

17 posts from 5 voices

Started 2 years ago by d0tt
Latest reply from Dude
This topic is resolved

Tags:

d0tt
Member

Hello,

I've noticed some viewers are complaining that the mouse hover preview image, that is visible on the main page and when browsing different catergories, is buggy in some browsers. It gets stuck when you change pages back and forth. (Seems to be mainly Firefox)

So I'm wondering, is there a simple way to disable the big hover picture from the main page and categories view?

http://i.imgur.com/CswEG.png

Posted 2 years ago #

Dude
Dude

Hey,
open up custom.js and delete following code:

jQuery($elements).each(function()
	{
		var $image = jQuery(this).contents("img");
		$newclass = 'lightbox_video';

		if(jQuery(this).attr('href').match(/(jpg|gif|jpeg|png|tif)/)) $newclass = 'lightbox_image';

		if ($image.length > 0)
		{
			if(jQuery.browser.msie &&  jQuery.browser.version < 7) jQuery(this).addClass('ie6_lightbox');

			var $bg = jQuery("<span class='"+$newclass+" '></span>").appendTo(jQuery(this));

			jQuery(this).bind('mouseenter', function()
			{
				var $height = $image.height(),
					$width = $image.width(),
					$pos =  $image.position(),
					$paddingX = parseInt($image.css('paddingTop')) + parseInt($image.css('paddingBottom')),
					$paddingY = parseInt($image.css('paddingLeft')) + parseInt($image.css('paddingRight'));					

				jQuery(this).removeClass('preloading');
				$bg.css({height:$height + $paddingY, width:$width + $paddingX, top:$pos.top, left:$pos.left});
			});
		}
	});	

	jQuery($elements).contents("img").hover(function()
	{
		jQuery(this).stop().animate({opacity:0.4},400);
	},
	function()
	{
		jQuery(this).stop().animate({opacity:1},400);
	});

This should remove the hover effect.

Posted 2 years ago #

d0tt
Member

Hello Dude,

This seems to have only removed the on hover effect that is visible when you are inside a post and hover over the pictures posted - The small magnifying glass indicating you can view a larger picture.

Posted 2 years ago #

Dude
Dude

Mea culpa - I didn't check thre screenshot and thought you wanted to remove the hover effect. To remove the gallery popup open op custom.js and delete the code between:

// -------------------------------------------------------------------------------------------
// galleryDisplay
// -------------------------------------------------------------------------------------------

and:

// -------------------------------------------------------------------------------------------
// input field improvements
// -------------------------------------------------------------------------------------------

Posted 2 years ago #

d0tt
Member

Hmm. That seems to delete the previews entirely :o No preview at all is visible when I remove that bit of code.

Posted 2 years ago #
Dude
Dude

I've uploaded a modified version of custom.js here: http://www.mediafire.com/?yp4ssf1g42fjo7y - the popup preview has been removed. It should work correctly now.

Posted 2 years ago #
crazywp
Member

if you can edit the js to show the preview only when hover it and not load with the page by deafult this will be awesome

Wish you consider it at least for fun :-)

Posted 2 years ago #
Dude
Dude

I think you asked for this feature before :) - it's not easy because it requires ajax coding, etc.

Posted 2 years ago #
crazywp
Member

i tested your code in the link it has bug try to hove the box to see what imean :-)

Posted 2 years ago #
Dude
Dude
No - it's not a bug with custom.js but with the hover css. The easiest solution is to modify index.php. Search for following code and delete it:
```
echo $big_prev_image;
```
Posted 2 years ago #
d0tt
Member

Thank you, Dude! Perfect :)

Posted 2 years ago #
Dude
Dude

Glad that I could help you :)

Posted 2 years ago #
kersti
Member

Just a quick one - has the latest code update overwritten your custom.js?? Or will installing that break the new theme update??

Posted 2 years ago #
Dude
Dude

Yes the custom.js file was updated. However the code I posted above still works - it helps you to remove the big gallery thumb.

Posted 2 years ago #
guswhite
Member

I have followed the advice above and managed to remove the hover preview from the index/gallery. However when the page loads the gallery preview thumbnails have not been made the correct size/cropped correctly.

To see what I mean please look at http://www.guswhite.com/wordpress/

When you click on the 'compact' or 'detailed' tabs it refreshes the preview thumbnails and they appear correctly. If you refresh the page they become incorrect once again.

I am not sure if crazywp is referring to this in his post but when I remove 'echo $big_prev_image;' from index.php it stops this behaviour but then no image loads when you click the 'large' tab.

Any idea how can I stop this behaviour and get them to appear correctly?

I am using Wordpress 3.1.3, and FYI I have the NextGen Gallery Plug In installed as well.

Thanks

Posted 1 year ago #
guswhite
Member

Ok I have managed to resolve it myself. In case anyone else has the same issue.....

The custom.js file in Expose 103 has been updated but the custom.js file that is linked here is based on a pre Expose 103 version. To remove the hover effect if you have Expose 103 you need to delete lines 19,20 & 21 from custom.js. The lines that contain this code:

//applies tooltips with images
jQuery('.gallery_entry').kriesi_tooltip({applyTooltip: '.item_small' });
jQuery('.gallery_entry').kriesi_tooltip({className: 'text_tooltip tooltip', applyTooltip: '.item_big', tooltipContent:'.gallery_excerpt'});

Once deleted the hover effect no longer appears.

Posted 1 year ago #
Dude
Dude

Thanks for the hint. Glad that you solved the problem :)

Posted 1 year ago #