Hello, I really like this fade in or out effect on mouseover an image: http://hv-designs.co.uk/2010/01/13/learn-how-to-add-a-jquery-fade-in-and-out-effect/ I build it into my Wordpress blog, it worked! But then I installed the lightbox plugins and it did not work anymore. Also tried slimbox and other clones.....same problem. How to get it work together? Or is there a simple plugin or single jquery or mootools script that has both "lightbox" for the images and "fade on mouseover" effect for the thumbnails?
hi, there is a quite nice jquery plugin replacement for lightbox: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ so maybe this plugin will work for You as it is also based on jQuery as Your favourite fade in/out effect You mention above.
Thanks for the quick reply. I watched some demos.....it fades the borders, not the image itself. Is it possible to fade the images, cuz I don't really like borders I haven't looked at the code yet.....
yes, of course just add fade in/out effect to those elements, I have prepared a little example for You: http://m1007.com/fadeinout/ is it what You are talking about ?
When in "lightbox mode" the user cannot right click image > save image as... How can I enable this? I'm using mariush1007's example
because most of those lightboxes like image galleries are adding navigation layer on top - hiding the image itself that way. You can disable that navigation layer using small css rule if You want: div.pp_hoverContainer { display:none !important; } Code (markup): but then only footer navigation (next and prev buttons) will be available to browse set of images. ps: I changed that in my above example so You can see the result.
Ok thanks again for the third time My final question : How to add a simple description + textlink in the lightbox (different for every image)?
if You want to add description to images in the "lightbox" view You need to use title attribute in Your <a> html tags, and if You want to include textlinks in Your descriptions You need to also escape those descriptions before You add them as a title attribute, You can do that in javascript or in php for example - if You are using php as a backend, so: 1) in javascript case just add below code (descriptions should be in the same order as images) var descriptions = [ 'First image description with <a href="http://forums.digitalpoint.com/showthread.php?t=1685587" target="_blank">textlink</a>', 'Second image description with <a href="http://forums.digitalpoint.com/showthread.php?t=1685587" target="_blank">textlink</a>', 'Third image description with <a href="http://forums.digitalpoint.com/showthread.php?t=1685587" target="_blank">textlink</a>' ] jQuery("a.photo").each(function(index){ jQuery(this).attr('title', escape(descriptions[index])); }) Code (markup): 2) in php case just add below code to each link: <a class="photo" href="images/1.jpg" rel="prettyPhoto[gal]" title="<?php echo htmlspecialchars('First image description with <a href="http://forums.digitalpoint.com/showthread.php?t=1685587" target="_blank">textlink</a>');?>"><img src="images/t_1.jpg"/></a> <a class="photo" href="images/2.jpg" rel="prettyPhoto[gal]" title="<?php echo htmlspecialchars('Second image description with <a href="http://forums.digitalpoint.com/showthread.php?t=1685587" target="_blank">textlink</a>');?>"><img src="images/t_2.jpg"/></a> <a class="photo" href="images/3.jpg" rel="prettyPhoto[gal]" title="<?php echo htmlspecialchars('Third image description with <a href="http://forums.digitalpoint.com/showthread.php?t=1685587" target="_blank">textlink</a>');?>"><img src="images/t_3.jpg"/></a> Code (markup): ps: again I changed that in my above example so You can see the result.
Damn... Everything works fine in html. It won't work in wordpress somehow Something in wordpress is blockong it Guess I'm just gonna stick with a lightbox or slimbox plugin and forget the thumbnail fadings
Combined the script with http://wordpress.org/extend/plugins/wp-prettyphoto/"]this plugin and now it's working on my blog