WordPress.org

Forums

JS hover effect (post featured image) (25 posts)

  1. jedikk1
    Member
    Posted 2 years ago #

    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...

  2. Andrew
    Forum moderator
    Posted 2 years ago #

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

  3. jedikk1
    Member
    Posted 2 years ago #

    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

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    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?

  5. jedikk1
    Member
    Posted 2 years ago #

    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?

  6. Andrew
    Forum moderator
    Posted 2 years ago #

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

  7. jedikk1
    Member
    Posted 2 years ago #

    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

  8. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  9. jedikk1
    Member
    Posted 2 years ago #

    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.

  10. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  11. jedikk1
    Member
    Posted 2 years ago #

    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?

  12. Andrew
    Forum moderator
    Posted 2 years ago #

    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>
  13. jedikk1
    Member
    Posted 2 years ago #

    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

  14. Andrew
    Forum moderator
    Posted 2 years ago #

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

  15. jedikk1
    Member
    Posted 2 years ago #

    What do you mean?

  16. Andrew
    Forum moderator
    Posted 2 years ago #

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

  17. jedikk1
    Member
    Posted 2 years ago #

    Ohh... I'm about to give up... unless You have any idea and of course if you want to help, cause I understand that I could be annoying for you with my almost none skills

    You know, I solved almost every problem I had with my few websites, but this seems to be the hardest one.

    There should be some plugin for this :p

  18. Andrew
    Forum moderator
    Posted 2 years ago #

    To which image(s) do you want to add an interactive effect?

  19. jedikk1
    Member
    Posted 2 years ago #

    Those 6 on homepage called Marine Fish, Corals... and so on

    Wouldnt be such a big problem if they weren't Post's Featured Images

  20. Andrew
    Forum moderator
    Posted 2 years ago #

    Try this in the bottom of your footer.php file, as we discussed earlier;

    <script type="text/javascript">
     $(document).ready(function() {
      jQuery('.span-8 a').hover(function($) {
       $this.children('img').fadeTo('slow', 0.5);
      });
     });
    </script>

    It may not work but from here we can debug the errors.

  21. jedikk1
    Member
    Posted 2 years ago #

    Added

  22. Andrew
    Forum moderator
    Posted 2 years ago #

    Try this instead

    <script type="text/javascript">
     jQuery(document).ready(function($) {
      $('.span-8 a img').hover(function($){
       $this.fadeTo("slow", 0.5);
      });
     });
    </script>
  23. jedikk1
    Member
    Posted 2 years ago #

    Replaced.

    By the way, I deleted all previous code from the tutorial, now it's just your code in footer.php

  24. Andrew
    Forum moderator
    Posted 2 years ago #

    Sorry I have not been able to resolve your issue, other forum volunteers are still welcome as always to help you.

  25. jedikk1
    Member
    Posted 2 years ago #

    Thanks for your time.

    I realize it is not so simple. It would be for typical image in post attached using <img src=".../>, then I wouldn't even ask for help, but this must be connected with theme php code, I guess some code must be added to some php file before and after the code that shows Post's Featured Image. Something like

    file: xyz.php
    <script = hover effect> <php get featured image> </script>

    (this is just idea example :D )

    But well, since I'm not programmer I may be wrong and solution could be totally different.

    Once again thank you for your time

Topic Closed

This topic has been closed to new replies.

About this Topic