Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #44283
    webmama
    Participant

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

    });

    });

    #132635
    pixelgrid
    Participant

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

    #132798
    webmama
    Participant

    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 :)

    #132805
    Mottie
    Member

    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.

    #133210
    webmama
    Participant

    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 :)

    #133642
    Mottie
    Member

    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 :)

    #138777
    alicialou
    Participant

    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

    #159991
    webmama
    Participant

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

    #160184
    webmama
    Participant

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

    #160185
    webmama
    Participant

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

    #160193
    webmama
    Participant

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

    #160202
    webmama
    Participant

    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.

    #160347
    webmama
    Participant

    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.

    #160922
    webmama
    Participant

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

    #160923
    webmama
    Participant

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

    Current WP Homepage

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.