WordPress.org

Support

Support » How-To and Troubleshooting » JS hover effect (post featured image)

JS hover effect (post featured image)

  • jedikk1
    Member

    @jedikk1

    Hello

    My website’s homepage is made of few pictures which are Post Featured Images. They are static, just link to the post. I wanted to add some javascript or some code to get them into ‘life’ and get some effect while mouse is over an image, for example simple fade or something.

    #1
    I found some java scripts respinsible for such effects (http://www.net-kit.com/10-jquery-caption-plugins/ ) but i have no idea how to install it. Remember it is about post’s featured image, uploaded picture from admin panel, I don’t put it in post in shortcodes or something, i can’t modify it… At least I don’t know how.

    I know JS might be difficult for me. But there might be also another solution.

    #2
    You probably know there is html code which does effect of changing image when mouse goes ovet it. Like this:

    <img src="image1.gif"
    onmouseover="this.src='image2.gif'"
    onmouseout="this.src='image1.gif'">

    But where should I put something like this? And how? I found in home.php some lines

    <?php get_the_image( array( 'custom_key' => array( 'thumbnail' ), 'default_size' => 'thumbnail', 'width' => '310', 'height' => '150' ) ); ?>
    <?php the_excerpt(); ?>

    Which I guess are responsible for displaying this Post’s featured image. Adding even simpliest hover effect would be divine for me.

    Help me please, I spent few nights trying to deal with it, and still nothing, I’m frustrated…

Viewing 15 replies - 1 through 15 (of 24 total)
  • Andrew Nevins
    Moderator

    @anevins

    Which tutorial are you following and where have you got up to?

    jedikk1
    Member

    @jedikk1

    I’ve tried installing javascripts from link above, also some other tutorials like this one:

    http://www.shoutmeloud.com/image-hover-effect-using-css-sprites.html

    Which is simple and nice, but there was always the same problem, I could do some hover effect sometimes with help of tutorials, but there was no info how to put it into Post’s Featured Image. At all.

    Linked CSS hover effect is no problem to do for example in post, cause I can write everything, put shortcodes or so. But Post’s Featured Image is uploaded thing, i can’t put anything like <blabla> </blabla>.

    @edit
    And here is my website:
    http://www.reefdb.cba.pl/

    So I want to add hover effect over those 6 images, even simpliest one

    Andrew Nevins
    Moderator

    @anevins

    I can’t see the JavaScript in this tutorial
    http://www.shoutmeloud.com/image-hover-effect-using-css-sprites.html
    Isn’t the tutorial for purely CSS hover effects?

    jedikk1
    Member

    @jedikk1

    Yes, this is CSS, but JS is in the first link in my first post. This one http://www.net-kit.com/10-jquery-caption-plugins/

    Anyway, how should I apply such plugin or CSS style to be working as FEATURED IMAGE?

    Andrew Nevins
    Moderator

    @anevins

    Your first link doesn’t specify which tutorial you’re using. Can you again specify which tutorial you’re following that uses JavaScript?

    jedikk1
    Member

    @jedikk1

    Well, the one I like is here: http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery

    But it doesn’t matter which one I would choose, because I don’t know how to change php file to add hover effect to featured image.

    Author doesn’t tell much, I am not scripter or programmist, I have no skills in this area. My idea is to use some javascript (would be the best, but can be something else) and insert code into my theme so it works. If you can help me adding even the simpliest hover effect I would be really thankful cause for me it seems to be too difficult with my low skills.

    I need someone who would tell me how to install everything and get it working, if you know some tutorial, or some hover effect scripts or codes and you can share them with me and help me installing it – would be amazing.

    Thanks in advance

    Andrew Nevins
    Moderator

    @anevins

    With that tutorial you need not change the PHP.
    Just make sure step 3.Javascript contains the correct selector, so you may need to change .item to your class/ID.

    jedikk1
    Member

    @jedikk1

    Right from the beginning, because I have no experience in this field.

    1st step – html code to call the image, I can put it for example in my post
    2nd step – CSS code, I can simply add it to style.css
    3rd step – javascript, – do I create new file, paste this code, and save file as .js? But what should be the name of this file? Or do I paste it somewhere in the code of my theme? (my theme is f8 lite)

    (correct me if I’m mistaken)

    Sorry for such questions, but for someone this could be simple, for me it it not yet.

    Andrew Nevins
    Moderator

    @anevins

    Step 1 you should already have.
    Step 2 yes it is simply addable to the CSS
    Step 3 You could put that JavaScript in the bottom of your web page.
    Before explaining in detail how to, do you know whether you’re using jQuery already? If not, right click on your web page and select ‘View source’, then search for “jquery”. If you have a match, copy & paste that line here please.

    jedikk1
    Member

    @jedikk1

    Pasted CSS code to style.css

    And results:

    jQuery(document).ready(function() {
    
    			jQuery.fn.cleardefault = function() {
    			return this.focus(function() {
    				if( this.value == this.defaultValue ) {
    					this.value = "";
    				}
    			}).blur(function() {
    				if( !this.value.length ) {
    					this.value = this.defaultValue;
    				}
    			});
    		};
    
    		jQuery(".clearit input, .clearit textarea").cleardefault();
    
        jQuery(".sf-menu ul").supersubs({
            minWidth:    12,
            maxWidth:    27,
            extraWidth:  1
        }).superfish({
        		delay:       500,
    		animation:   {opacity:"show",height:"show"},
    		speed:       100,
    		autoArrows:  true,
    		dropShadows: true
        });jQuery("#slideshow-posts").cycle({
    	        fx:      "fade",
    	        timeout:  4000,
    	        prev:    "#prev",
    	        next:    "#next",
    	        pager:   "#slideshow-nav"
    	    });});

    and

    /* <![CDATA[ */
    jQuery(document).ready(function($){
    var fb_timeout = null;
    var fb_opts = { 'overlayShow' : true, 'overlayOpacity' : 0.4, 'overlayColor' : '#009cff', 'width' : 100, 'height' : 100, 'padding' : 10, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'speedIn' : 250, 'speedOut' : 200, 'changeFade' : 200, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
    /* IMG */
    var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
    $(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery');
    $('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutQuad', 'transitionOut' : 'elastic', 'easingOut' : 'easeInQuad', 'opacity' : true, 'titleShow' : true, 'titlePosition' : 'inside', 'titleFromAlt' : true }) );
    /* Auto-click */
    $('#fancybox-auto').trigger('click');
    });
    /* ]]> */

    and few lines like this:

    <script type="text/javascript" src="http://reefdb.cba.pl/wp-includes/js/admin-bar.js?ver=3.4.2"></script>

    You say that I can put js code at the bottom of my webpage, does it matter in which php file?

    Andrew Nevins
    Moderator

    @anevins

    You should add that jQuery on step 3 into your footer.php file, wrapped in script tags, just above your </body> element.

    E.g

    <script type="text/javascript">
    $(document).ready(function() {
    
        //move the image in pixel
        var move = -15;
    
        //zoom percentage, 1.2 =120%
        var zoom = 1.2;
    
        //On mouse over those thumbnail
        $('.item').hover(function() {
    
            //Set the width and height according to the zoom percentage
            width = $('.item').width() * zoom;
            height = $('.item').height() * zoom;
    
            //Move and zoom the image
            $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
    
            //Display the caption
            $(this).find('div.caption').stop(false,true).fadeIn(200);
        },
        function() {
            //Reset the image
            $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});    
    
            //Hide the caption
            $(this).find('div.caption').stop(false,true).fadeOut(200);
        });
    
    });
    </script>
    </body>

    jedikk1
    Member

    @jedikk1

    Ok, so I have pasted CSS and JS into my website’s files.

    But there is some problem with CSS. I copied whole code starting from 5th line (without body {… ) from here:
    http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery

    But see the website http://www.reefdb.cba.pl/ not like it should be :/

    @edit
    here is the css file

    http://reefdb.cba.pl/wp-content/themes/f8-lite/style.css

    Andrew Nevins
    Moderator

    @anevins

    What is it you want to do on your website, to which element?
    For now, you can remove position absolute to your img style.

    jedikk1
    Member

    @jedikk1

    What do you mean?

    Andrew Nevins
    Moderator

    @anevins

    There may be an easier outcome, that tutorial requires a lot of extra HTML mark-up that may not be necessary.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘JS hover effect (post featured image)’ is closed to new replies.