Grow your CSS skills. Land your dream job.

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

  • # April 21, 2013 at 3:58 pm

    Hello there JavaScript programmers… I have downloaded the ‘Revealing Photo Slider with jQuery by CSS-Tricks’ to implement it into my new portfolio website. Being a web designer, but not a JavaScript expert, I have no idea as to how to make this change that I think should be simple:

    The page loads with all the photo slider divs closed by default. Then they can all be expanded one after the other. But, I want it to automatically collapse a previously opened photo slider div if another one is clicked to be expanded.

    Any help with this would be greatly appreciated. I have the code below:

    $(document).ready(function(){

    $(‘.photo_slider’).each(function(){

    var $this = $(this).addClass(‘photo-area’);
    var $img = $this.find(‘img’);
    var $info = $this.find(‘.info_area’);

    var opts = {};

    $img.ready(function(){
    opts.imgw = $img.width();
    opts.imgh = $img.height();
    });

    opts.orgw = $this.width();
    opts.orgh = $this.height();

    $img.css ({
    marginLeft: “-150px”,
    marginTop: “-150px”
    });

    var $wrap = $(‘

    ‘).append($img).prependTo($this);

    var $open = $(‘More Info >‘).appendTo($this);

    var $close = $(‘Close‘).appendTo($info);

    opts.wrapw = $wrap.width();
    opts.wraph = $wrap.height();

    $open.click(function(){
    $this.animate({
    width: opts.imgw,
    height: (opts.imgh+95),
    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 );

    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;
    });

    });

    });

    # April 21, 2013 at 4:13 pm

    a redused test case to http://codepen.io/pen could help us help you

    # April 22, 2013 at 11:55 pm

    Okay pixelgrid. I think what you want is for me to post the code into codepen. So I signed up and did that. Here is the link:

    http://codepen.io/webmama/pen/jftHn

    Is that better?? I did notice that the code I posted here in the forum got messed up. I really appreciate your feedback.

    Thanks so much :)

    # April 23, 2013 at 2:37 am

    Hi @webmana!

    The code from this post didn’t seem to work right for the last two images, so I copied the code from the actual demo. All I added was this line inside the function that expanded the photo:

    $this.closest(‘td’).siblings().find(‘.close’).click();

    Here is the full code & [updated demo](http://codepen.io/Mottie/pen/vDboy)

    // Window load event, slower than DOM Ready but needed because of image calculations
    $(window).bind(“load”, function() {

    $(‘.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 = $(‘

    ‘).append($img).prependTo($this);

    var $open = $(‘More Info >‘).appendTo($this);

    var $close = $(‘Close‘).appendTo($info);

    opts.wrapw = $wrap.width();
    opts.wraph = $wrap.height();

    $open.click(function(){
    $this.animate({
    width: opts.imgw,
    height: (opts.imgh+95),
    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.closest(‘td’)
    .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;
    });

    });

    });

    Please note, this code is 5 years old and can now be done using CSS3 only and not using a table in the markup.

    # April 25, 2013 at 10:57 pm

    Hi Mottie . Thanks so much for you reply. I have copied your code and tested it, but it doesn’t work for me at all. The images just load on the page full scale and the JavaScript doesn’t seem to be working at all. I am very confused!!! What did I do wrong??? There is a link below:

    http://206.174.210.72/~savie/NewTest.html

    I greatly appreciate your input and please advise me as to what could be the problem.

    Thanks :)

    # April 30, 2013 at 2:50 pm

    I think the problem is that the “photorevealer.js” script is the same thing and interfering with the script already in the page… Anyway, I emailed you an updated demo :)

    # June 14, 2013 at 9:49 pm

    Hey just to give you a heads up here is a site with a basic slider. The code is super easy to understand and you might find it helpful. It uses jQuery and has a rotating description as well as the navigation thumbnails and next and previous buttons.

    http://codetutorial.caroshaw.com/jquery_image_slider.php

    # January 9, 2014 at 2:09 pm

    I have built my new portfolio site in WordPress using the Wowway theme. Now I want to add my way cool slider into the home page. However, when I paste the code in nothing works.

    Here is my website: http://www.savie.biz

    I have the HTML page that you helped me perfect working fine and you can view it here on my server:

    The test page

    I don’t know where to start in getting this straightened out. Any help would be greatly appreciated. And… Thank you very much for the previous help. :)

    # January 12, 2014 at 6:45 am

    Hi @webmama!

    If you press F12, then click on the console tab you’ll see these two errors.

    Uncaught The jQuery version that was loaded is too old. MsgBox requires jQuery 1.3+ plugins.min.js:155
    Uncaught ReferenceError: hoverElem is not defined plugins.min.js:322

    But it looks like you’re using jQuery v1.10.2, so it’s likely a bug in the wowway script. Since I have no idea how long it would take wowway to fix that bug, the easiest solution would be to switch the jQuery version to 1.9.1 (http://code.jquery.com/jquery-1.9.1.min.js), AND open a support ticket to get those errors fixed.

    # January 12, 2014 at 3:36 pm

    Hummm… My flie says it is jQuery version 1.9.1… I am very confused!!

    # January 12, 2014 at 3:39 pm

    Any chance that you could explain more please… Did you mean to open a support ticket with the Wowway developer… or on here??__

    # January 12, 2014 at 5:30 pm

    Hi @webmama!

    Sorry for not being clear enough.

    From the page you shared: http://www.savie.biz/home/

    I see this version of jQuery when I view the page source: http://www.savie.biz/wp-includes/js/jquery/jquery.js?ver=1.10.2

    which says version 1.10.2 at the top when you open that link.

    The errors shown within the browser console are from this file: http://www.savie.biz/wp-content/themes/wowway/js/plugins.min.js, but now I’m not seeing the second error (Uncaught ReferenceError: hoverElem is not defined plugins.min.js:322) and I’m not sure what changed.

    Basically, the first error would prevent the MsgBox plugin from working, but it would not break other plugins and/or code on the page. The second error, which has now somehow disappeared, could have possibly caused problems with other code on the page.

    When I said ask for some support, I meant for you to go to this page: http://themeforest.net/item/wowway-interactive-responsive-portfolio-theme/2374321 and click on the “Get Support” button. Then just post a link back to this forum thread… but that probably isn’t necessary now.

    Anyway, I think I now I see the real problem. The code I shared above to make the boxes work has been added directly to the HTML, and WordPress does some weird stuff when you do that… it inserts <p> tags and pretty much breaks the script.

    I’m not a WordPress expert, but try adding the following code into your footer.php file (slightly different than what was posted before):

    <script>
    // Window load event, slower than DOM Ready but needed because of image calculations
    (function($){
        $(window).load(function() {
    
            $('.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 = $('<a href="#" class="more_info">More Info ></a>').appendTo($this);
                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+95),
                        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.closest('td').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 5:50 pm

    So does it matter where I add the code into footer.php?? Sorry, I am new to PHP.

    # January 12, 2014 at 6:28 pm

    I would add it at the top… anywhere is fine, except it should be above the closing body and html tags. I’m not that good with WordPress, so I’m not even sure if these tags are in there…

    <!-- above these -->
    </body>
    </html>
    
    # January 12, 2014 at 7:01 pm

    Thanks!!! That really made a difference. However, now they keep opening up… The next one clicked doesn’t close the previous one anymore… Not sure why.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

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