fancy images - 2 questions

(11 posts) (3 voices)

1. 

   buggerlugs
   Member

   1. how can i right align an image?
   2. what code controls the overlay with the magnifying glass? I'd like to change it so the image goes darker rather than lighter and also possibly change the icon

   Posted 11 months ago #
2. 

   Elliott
   Support

   Hello buggerlugs,

   1. You can align it by surrounding the shortcode with this,

   <div style = 'float: right;'>
   [fancy_images]
   </div>

   2. Open up /wp-content/themes/awake/lib/scripts/custom.js and on lines 19 - 29 you should see this,

   /* hover fade functions */
   function fade_hover() {
   	jQuery('.fade_hover').hover(
   		function() {
   				jQuery(this).stop().animate({opacity:0.4},400);
   			},
   			function() {
   				jQuery(this).stop().animate({opacity:1},400);
   		});
   
   }

   You can also find the images in /wp-content/themes/awake/styles/_shared/.

   Let us know if this helps.

   Posted 11 months ago #
3. 

   buggerlugs
   Member

   thanks for the reply Elliot
   so really the opacity is fading the image on mouse over?
   In which case it wouldnt be possible to make the image darker I assume? after all it cant get more opaque than 1 right?

   I did try making a dark "zoom.png" but that doesnt work because it appears in the image frame as you can see here:

   http://www.danielledeniese.co.uk/news/beauty-of-the-baroque.html

   The effect i was trying to achieve was to make the mouse over much darker than the defualt 100% opaque image and with a fade out to normal opacity in the centre where the icon is, but i dont think its possible, is it?

   Posted 11 months ago #
4. 

   Ruderic
   Support

   Hi buggerlugs,

   This script is reducing the opacity of the image in the gallery, not increasing the opacity of the zoom image.

   So, what you have to do, is reduce the 0.4 value in this code:

   jQuery(this).stop().animate({opacity:0.4},400);

   Posted 11 months ago #
5. 

   buggerlugs
   Member

   Hi I think you misunderstand me. I dont want to make the hover lighter, which is what will happen if i reduce the opacity of that code.

   Posted 11 months ago #
6. 

   Ruderic
   Support

   Hello,

   Have you tried the code that I provided? Increase or decrease that value, and see what happens.

   Posted 11 months ago #
7. 

   buggerlugs
   Member

   so i changed line 23 in custom.js to this
   jQuery(this).stop().animate({opacity:0.1},400);

   I also tried it at 0.8

   and it made no visable difference to this page at all

   http://www.danielledeniese.co.uk/multimedia/photos/le-nozze-di-figaro-sf

   Posted 11 months ago #
8. 

   Ruderic
   Support

   The jQuery script that controls the portfolio is not the same as the one that you edited. If you want to change the portfolio hover, you need to edit this block of code in the file "custom.js":

   function portfolio_img_hover() {
   	jQuery(".load_img").hover(
   		function() {
   				jQuery(this).find('.portfolio_hover').stop().animate({opacity:0.4},400);
   			},
   			function() {
   				jQuery(this).find('.portfolio_hover').stop().animate({opacity:1},400);
   			});
   }

   Search that code, and apply the changes.

   Posted 11 months ago #
9. 

   buggerlugs
   Member

   ok that is line 35 and as ive said before that only control the lightness and is not what im trying to achieve.

   I'll explain again - the opacity is only changing the lighness of the mouse over because the background is white.
   If the background was black then making a hight opactiy (eg: 0.9) would make the mouse-over almost total back, if you reduced it to 0.1 it would only darken the image slightly.

   But as ive been saying - you can only make the hover lighter with opacity controls - and thats because the background of the image is white.

   This was why I tried to to make the zoom image a kind of "overlay" that would darken the image.

   This pretty much what i wanted to achieve:
   http://www.tympanus.net/Development/PhotoEffect/
   darkening rather than lightening

   Posted 11 months ago #
10. 

    Elliott
    Support

    I don't see an easy way to do this with our frames buggerlugs.

    You can probably get the effect you are wanting by setting a custom background for your image. Maybe something like this,

    <div style = 'width: 200px; height: 200px; background: #000;'>
    <img src = '#' class = 'hoverme' width = '200' height = '200' />
    </div>

    And then place this code in the custom.js file,

    jQuery('.hoverme').hover(
    	function() {
    			jQuery(this).stop().animate({opacity:0.4},400);
    		},
    		function() {
    			jQuery(this).stop().animate({opacity:1},400);
    	});

    It's not perfect but we can keep adding to it as we go.

    Posted 11 months ago #
11. 

    buggerlugs
    Member

    thatnks for the help but that didnt work. I also needed it to work for the fancy images shortcode - but i guess it cant be done.

    Posted 11 months ago #

RSS feed for this topic

Reply

You must log in to post.