Grow your CSS skills. Land your dream job.

JAVASCRIPT HELP PLEASE WITH… Revealing Photo Slider with jQuery by CSS-Tricks!!!

  • # January 12, 2014 at 7:30 pm

    Oh, I didn’t notice that the HTML is different from the original demo…

    First off, the windows are a little too small, the h3 elements are cut off (intentionally?) and the revealed info window’s height isn’t enough to show all the text (new demo).

    So I modified this bit of css (only the changed css is shown)

    #TopDiv .photo_slider { 
        width: 150px;
        height: 280px;
    }
    

    And modified the script as follows. Notice the variable at the top var openInfoPanelHeight = 240; which allows you to adjust the open information window height:

    <script>
    // Window load event, slower than DOM Ready but needed because of image calculations
    (function($){
        $(window).load(function() {
    
            var openInfoPanelHeight = 240;
    
            $('.photo_slider').each(function(){
    
                var $this = $(this).addClass('photo-area');
                var $img = $this.find('img');
                var $info = $this.find('.info_area');
    
                var opts = {};
    
                opts.imgw = $img.width();
                opts.imgh = $img.height();
    
                opts.orgw = $this.width();
                opts.orgh = $this.height();
    
                $img.css ({
                    marginLeft: "-150px",
                    marginTop: "-150px"
                });
    
                var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);
                var $open = $this.find('h3');
                var $close = $('<a class="close">Close</a>').appendTo($info);
    
                opts.wrapw = $wrap.width();
                opts.wraph = $wrap.height();
    
                $open.click(function(){
                    $this.animate({
                        width: opts.imgw,
                        height: (opts.imgh+openInfoPanelHeight),
                        borderWidth: "10"
                    }, 600 );
    
                    $open.fadeOut();
    
                    $wrap.animate({
                        width: opts.imgw,
                        height: opts.imgh
                    }, 600 );
    
                    $(".info_area",$this).fadeIn();
    
                    $img.animate({
                        marginTop: "0px",
                        marginLeft: "0px"
                    }, 600 );
                    $this.siblings().find('.close').click();
                    return false;
                });
    
                $close.click(function(){
                    $this.animate({
                        width: opts.orgw,
                        height: opts.orgh,
                        borderWidth: "1"
                    }, 600 );
    
                    $open.fadeIn();
    
                    $wrap.animate({
                        width: opts.wrapw,
                        height: opts.wraph
                    }, 600 );
    
                    $img.animate({
                        marginTop: "-150px",
                        marginLeft: "-150px"
                    }, 600 );
    
                    $(".info_area",$this).fadeOut();
                    return false;
                });
    
            });
    
        });
    })(jQuery);
    </script>
    
    # January 12, 2014 at 7:38 pm

    Oops, I had to make a few changes to the code, updated above, because I didn’t notice that some of the revealed info links actually went to other pages.

    # January 13, 2014 at 11:03 pm

    Hi Mottie,

    I tweaked the CSS code so they fit nice on the page now… But, now they keep opening up… The next one clicked doesn’t close the previous one still.

    Also, I actually had the HTML version so the user just has to hover, not actually click the ‘More Info’ text. I don’t have the previous emails anymore.

    # January 21, 2014 at 5:02 pm

    Hi Mottie,

    I tried to look back and do the edits that you sent me back in April of last year, before I was attempting to paste it into my WordPress home page. I tried to implement them into the code you sent me on January 12th. However, it still isn’t behaving the way the HTML version one is… We got the HTML version working perfect because there is only one enlarged image at a time that stays to the left… and when another thumbnail’s link is hovered over, that image enlarges and snaps over to the left replacing the previous larger image… The previous larger image then becomes a thumbnail again and is sent back to the lineup with the other thumbnails.

    Unfortunately, I cannot actually re-read that email you sent back in April because my system crashed last year and I lost it. Is there any chance that you can help me get this straightened out again. I would greatly appreciate it. I am sorry to be annoying, but I am not sure what I am missing. Here is a link to the HTML page that behaves exactly the way I want it to: index2.html

    Thank you so much for your many replies… Please don’t get frustrated with me. I am really trying to learn to figure these things out on my own. :)

    # January 21, 2014 at 5:14 pm

    And here is my WordPress home page that needs the fixing:

    Current WP Homepage

    # January 21, 2014 at 5:21 pm

    Here is a snippet of what the script looks like on that WordPress page:

    <p><script>
    // Window load event, slower than DOM Ready but needed because of image calculations
    (function($){
    $(window).bind("load", function() {</p>
    <p> $('.photo_slider').each(function(){</p>
    <p>     var timer,</p>
    <p>            $this = $(this).addClass('photo-area'),</p>
    <p>         $img = $this.find('img'),</p>
    <p>         $info = $this.find('.info_area'),</p>
    <p>         $wrap = $('
    <div class="photo_slider_img">').append($img).prependTo($this),</p>
    <p>         $open = $('<a href="#" class="more_info">More Info ></a>').appendTo($this),</p>
    <p>         $close = $('<a class="close">Close</a>').appendTo($info),</p>
    <p>         opts = {};</p>
    

    See all the extra <p> and </p>?… that’s WordPress’ doing. And that’s why the script needs to be moved into an external js file (footer.php might be better).

    I forwarded all the emails from April to you. If you still need help, please don’t hesitate to ask.

    # January 22, 2014 at 4:14 pm

    Hi Mottie,

    I have tried to add the edits to customize the slider like I had it in the HTML file, but I keep messing it up. I am frustrated. Can you help me please?? Do I need to revert back to the code you sent on Jan 12? Or, are my edits fixable??

    Thanks again. I greatly appreciate all the help.
    Laura :)

    # January 22, 2014 at 4:35 pm

    Honestly, I would just copy the javascript code you have in the demo that works the way you want it,index2.html, and paste that into the footer.php file.

    If you want, sent me a copy of your footer.php file and I can do that part for you.

    # January 23, 2014 at 4:06 pm

    I did try that, but then the links don’t show up at all… Very frustrating!!! There has got to be another issue I am thinking. I sent you the file. Thanks so much for your help!!!

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".