SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Main and thumbnail swap with expander

    Hi all,

    Just wondering if you can help, as I'm fairly new to JS - I'm using Highslide.js on a project and I've tweaked it a bit so that it not only expands a thumbnail image, but also swaps out the main "slider" image onclick (it's not really a slider, it's more of a hero image). It works beautifully in Firefox, but not in Chrome or Safari. Any suggestions? Here's the fiddle: http://jsfiddle.net/F8Yfg/54/

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Welcome to the forums

    Quote Originally Posted by coffee_hound View Post
    It works beautifully in Firefox, but not in Chrome or Safari. Any suggestions?
    Your code behaves the same for me in Firefox, as it does in Chrome.

    What are you expecting to happen when you click on one of the coloured rectangles beneath the larger yellow rectangle?

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    Welcome to the forums



    Your code behaves the same for me in Firefox, as it does in Chrome.

    What are you expecting to happen when you click on one of the coloured rectangles beneath the larger yellow rectangle?

    It's supposed to expand the thumbnail to reveal a larger image (which it does), and swap out the main slider image (which it does not in Chrome and Safari).

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    For me, whenever I click on any of the smaller coloured squares, a green square pops out (with a link to the highslide website). The larger yellow image remains unchanged. This happens in Chrome and Firefox.

    If you can make a working demo (the smaller image popping out), I'm happy to take a look.

  5. #5
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    For me, whenever I click on any of the smaller coloured squares, a green square pops out (with a link to the highslide website). The larger yellow image remains unchanged. This happens in Chrome and Firefox.

    If you can make a working demo (the smaller image popping out), I'm happy to take a look.

    The green square is supposed to pop out. The larger yellow image is supposed to swap to a red image when you click on the red thumbnail. This is the issue I'm having. I can email you a link to the project on a test server if you like - I'm not comfortable posting it here. It works fine on the test server.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ah ok.

    Well, what you need to do is get rid of all of that inline JS and CSS for a start.
    Then you can attach event listeners to the respective elements and swap out the image src attribute accordingly.

    Here's a fiddle

    And to be complete, the code:

    Code:
    <div class="header"> 
      <img src="http://sigadtest.com/gallery/slider.jpg" id="slider" />
    </div>
            
    <div id="gallery">
      <a href="http://sigadtest.com/gallery/larger.jpg" class="highslide">
          <img src="http://sigadtest.com/gallery/thumb.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger1.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb1.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger2.jpg" class="highslide">  
        <img src="http://sigadtest.com/gallery/thumb2.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger3.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb3.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger4.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb4.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger5.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb5.jpg" />
      </a>
    </div>
    Code:
    hs.graphicsDir = 'http://sigadtest.com/highslide/graphics/';
    
    var gallery = document.getElementById("gallery"),
        links = gallery.getElementsByTagName("a"),
        slider = document.getElementById("slider");
    
    for (var i = 0; i < links.length; ++i) {
        links[i].onclick = function(){
            slider.src = this.querySelector('img').src;
            slider.width = 866;
            slider.height = 337;
            return hs.expand(this);
        };
    }
    Code:
    a.highslide-full-expand {
       background: url(http://sigadtest.com/highslide/graphics/fullexpand.gif) no-repeat;
       display: block;
       margin: 0 10px 10px 0;
       width: 34px;
       height: 34px;
    }
    HTH

  7. #7
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ah ok.

    Well, what you need to do is get rid of all of that inline JS and CSS for a start.
    Then you can attach event listeners to the respective elements and swap out the image src attribute accordingly.

    Here's a fiddle

    And to be complete, the code:

    Code:
    <div class="header"> 
      <img src="http://sigadtest.com/gallery/slider.jpg" id="slider" />
    </div>
            
    <div id="gallery">
      <a href="http://sigadtest.com/gallery/larger.jpg" class="highslide">
          <img src="http://sigadtest.com/gallery/thumb.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger1.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb1.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger2.jpg" class="highslide">  
        <img src="http://sigadtest.com/gallery/thumb2.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger3.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb3.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger4.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb4.jpg" />
      </a>
      <a href="http://sigadtest.com/gallery/larger5.jpg" class="highslide">
        <img src="http://sigadtest.com/gallery/thumb5.jpg" />
      </a>
    </div>
    Code:
    hs.graphicsDir = 'http://sigadtest.com/highslide/graphics/';
    
    var gallery = document.getElementById("gallery"),
        links = gallery.getElementsByTagName("a"),
        slider = document.getElementById("slider");
    
    for (var i = 0; i < links.length; ++i) {
        links[i].onclick = function(){
            slider.src = this.querySelector('img').src;
            slider.width = 866;
            slider.height = 337;
            return hs.expand(this);
        };
    }
    Code:
    a.highslide-full-expand {
       background: url(http://sigadtest.com/highslide/graphics/fullexpand.gif) no-repeat;
       display: block;
       margin: 0 10px 10px 0;
       width: 34px;
       height: 34px;
    }
    HTH

    Thank you so much!!! I'll try that now and let you know how it works.

  8. #8
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by coffee_hound View Post
    Thank you so much!!! I'll try that now and let you know how it works.
    It's not working now that I've changed the file names from the example names to the real names. I don't think that's the issue, though - I think it's trying to find the expander image, and the path seems to be correct.

    Here's a link to the site on the test server - the thumbnail image is not expanding properly. http://bit.ly/1lnW4p2
    Last edited by coffee_hound; Feb 27, 2014 at 14:49. Reason: Adding relevant info

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Oh dear.

    If you can post some real code, I can (probably) help you more.

  10. #10
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. It works like a charm in the fiddle, but as soon as I changed the file names, it didn't work. I think the issue is the expander file - the path to the expander file. I'll try one more thing.

  11. #11
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New fiddle: http://jsfiddle.net/coffee_hound/UUsE2/9/

    Expander is not working. Damn.

  12. #12
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait! Now it's working in the fiddle but the slider image is getting swapped with the "larger" image - that image is showing both in the expander and the slider area.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Sorry, you've lost me. I thought that was exactly what you wanted.

  14. #14
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Sorry, you've lost me. I thought that was exactly what you wanted.
    There are 3 images involved in this - a slider, a thumbnail, and the mid-sized image for the expander. When the thumbnail is clicked, it should expand to reveal the mid-sized image and swap out the slider image. In the fiddle, it appears that the thumbnail image is what's replacing the slider and it's being stretched to the size of the slider. Open this link in Firefox and you'll see what should be happening: http://sigadtest.com/aurora/index-test.html
    Last edited by coffee_hound; Feb 28, 2014 at 08:48. Reason: Clarification

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    The image img.width and img.height declarations are what is stretching the thumbnail.
    Remove them and the thumbnail will keep its original dimensions.

    Taking the page you link to as an example, if you click on Vanessa Cruz, the thumbnail with her face on it expands to reveal a larger image of her that says "Read more". I'm presuming this is correct.

    The larger image in the background that says "Meet Desi Nesmith" stays the same. I'm guessing this is a problem.

    What should happen to Desi when I click on Vanessa?

  16. #16
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    The image img.width and img.height declarations are what is stretching the thumbnail.
    Remove them and the thumbnail will keep its original dimensions.

    Taking the page you link to as an example, if you click on Vanessa Cruz, the thumbnail with her face on it expands to reveal a larger image of her that says "Read more". I'm presuming this is correct.

    The larger image in the background that says "Meet Desi Nesmith" stays the same. I'm guessing this is a problem.

    What should happen to Desi when I click on Vanessa?
    When you click on Vanessa, the thumbnail should expand to show the slide that says "Read More" and the slider image should swap to the one that says "Vanessa Cruz" with the text and arrow in the middle. Open the link I posted before (open in Firefox) and you'll see what should happen - there are three images involved. The code I used originally works in FF, but the key is making it work in Chrome and Safari.

    Here's the link I posted before: http://sigadtest.com/aurora/index-test.html

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ok, got it.
    I've spent a good while figuring this out, but your highslide script is mangling the DOM and doing all kinds of weird things behind the scenes.
    This is the best I could come up with:

    Code:
    <!doctype html>
      <head>
        <base href="http://sigadtest.com/" />
        <meta charset="utf-8">
        <title>Home  › Neag School  › UCONN</title>
        <link href="http://aurora.uconn.edu/wp-content/themes/hale/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="../aurora/themes/education/style.css" rel="stylesheet">
        <style>
        .neag-gallery{
          text-align: center;
        }
        .neag-gallery img{
          height: 175;
          width: 120;
        }
        </style>
      </head>
    
      <body class="uc-">
        <div class="education-content">
          <div class="header">
              <a href="http://www.education.uconn.edu">
                <img src="../aurora/themes/education/img/gallery/slider.jpg" alt="Desi Nesmith" title="Desi Nesmith" id="slider"  />
              </a>
          </div>
    
          <div class="neag-gallery" id="gallery">
            <a href="../aurora/themes/education/img/gallery/larger.jpg" class="highslide" id="slide1">
              <img src="../aurora/themes/education/img/gallery/thumb.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger1.jpg" class="highslide" id="slide2">
              <img src="../aurora/themes/education/img/gallery/thumb1.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger2.jpg" class="highslide" id="slide3">
              <img src="../aurora/themes/education/img/gallery/thumb2.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger3.jpg" class="highslide" id="slide4">
              <img src="../aurora/themes/education/img/gallery/thumb3.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger4.jpg" class="highslide" id="slide5">
              <img src="../aurora/themes/education/img/gallery/thumb4.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger5.jpg" class="highslide" id="slide6">
              <img src="../aurora/themes/education/img/gallery/thumb5.jpg" />
            </a>
          </div>    
        </div>
    
        <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../aurora/themes/education/js/highslide.js"></script>
        <script type="text/javascript">
          hs.graphicsDir = 'http://sigadtest.com/highslide/graphics/';
    
          var gallery = document.getElementById("gallery"),
              links = gallery.getElementsByTagName("a"),
              slider = document.getElementById("slider"),
              eventsAttached = false,
              imgPath = "../aurora/themes/education/img/gallery/",
              imgSwapped = false;
              slides = {
                "slide1" : "slider.jpg",
                "slide2" : "slider1.png",
                "slide3" : "slider2.png",
                "slide4" : "slider3.png",
                "slide5" : "slider4.png",
                "slide6" : "slider5.png"
              };
    
          for (var i = 0; i < links.length; i++) {
            links[i].onclick = function(){
              if(eventsAttached && !imgSwapped){
                newSrc = imgPath + slides[this.id];
                slider.src = newSrc;
                imgSwapped = true;
              }
              setTimeout(function(){
                imgSwapped = false;
              }, 1000)
              return hs.expand(this);
            }
          }
    
          setTimeout(function(){
            eventsAttached = true;
          }, 500);
        </script>
      </body>
    </html>
    To be honest, this feels wrong and if I was you, I would use a different image slider that didn't make me fight it (there are plenty out there).

    Also, there is quite a lot wrong with the markup of the page you link to.
    If you run it through the W3 validator (results), you get 42 Errors, 31 warning(s).

    And you are doing some mad stuff such as including jQuery three times.

    Here's a demo of things working as expected.

    HTH

  18. #18
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, got it.
    I've spent a good while figuring this out, but your highslide script is mangling the DOM and doing all kinds of weird things behind the scenes.
    This is the best I could come up with:

    Code:
    <!doctype html>
      <head>
        <base href="http://sigadtest.com/" />
        <meta charset="utf-8">
        <title>Home   Neag School   UCONN</title>
        <link href="http://aurora.uconn.edu/wp-content/themes/hale/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="../aurora/themes/education/style.css" rel="stylesheet">
        <style>
        .neag-gallery{
          text-align: center;
        }
        .neag-gallery img{
          height: 175;
          width: 120;
        }
        </style>
      </head>
    
      <body class="uc-">
        <div class="education-content">
          <div class="header">
              <a href="http://www.education.uconn.edu">
                <img src="../aurora/themes/education/img/gallery/slider.jpg" alt="Desi Nesmith" title="Desi Nesmith" id="slider"  />
              </a>
          </div>
    
          <div class="neag-gallery" id="gallery">
            <a href="../aurora/themes/education/img/gallery/larger.jpg" class="highslide" id="slide1">
              <img src="../aurora/themes/education/img/gallery/thumb.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger1.jpg" class="highslide" id="slide2">
              <img src="../aurora/themes/education/img/gallery/thumb1.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger2.jpg" class="highslide" id="slide3">
              <img src="../aurora/themes/education/img/gallery/thumb2.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger3.jpg" class="highslide" id="slide4">
              <img src="../aurora/themes/education/img/gallery/thumb3.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger4.jpg" class="highslide" id="slide5">
              <img src="../aurora/themes/education/img/gallery/thumb4.jpg" />
            </a>
    
            <a href="../aurora/themes/education/img/gallery/larger5.jpg" class="highslide" id="slide6">
              <img src="../aurora/themes/education/img/gallery/thumb5.jpg" />
            </a>
          </div>    
        </div>
    
        <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../aurora/themes/education/js/highslide.js"></script>
        <script type="text/javascript">
          hs.graphicsDir = 'http://sigadtest.com/highslide/graphics/';
    
          var gallery = document.getElementById("gallery"),
              links = gallery.getElementsByTagName("a"),
              slider = document.getElementById("slider"),
              eventsAttached = false,
              imgPath = "../aurora/themes/education/img/gallery/",
              imgSwapped = false;
              slides = {
                "slide1" : "slider.jpg",
                "slide2" : "slider1.png",
                "slide3" : "slider2.png",
                "slide4" : "slider3.png",
                "slide5" : "slider4.png",
                "slide6" : "slider5.png"
              };
    
          for (var i = 0; i < links.length; i++) {
            links[i].onclick = function(){
              if(eventsAttached && !imgSwapped){
                newSrc = imgPath + slides[this.id];
                slider.src = newSrc;
                imgSwapped = true;
              }
              setTimeout(function(){
                imgSwapped = false;
              }, 1000)
              return hs.expand(this);
            }
          }
    
          setTimeout(function(){
            eventsAttached = true;
          }, 500);
        </script>
      </body>
    </html>
    To be honest, this feels wrong and if I was you, I would use a different image slider that didn't make me fight it (there are plenty out there).

    Also, there is quite a lot wrong with the markup of the page you link to.
    If you run it through the W3 validator (results), you get 42 Errors, 31 warning(s).

    And you are doing some mad stuff such as including jQuery three times.

    Here's a demo of things working as expected.

    HTH
    Thanks so much for assisting with this - I left the jQuery includes in place because I didn't know whether or not they'd be needed, but I can remove them if this is not using jQuery at all (this is still a work in progress - it has to be converted to a Wordpress template and unnecessary code removed). The only thing that Highslide is doing (I'm guessing) is expanding the thumbnail, so I wonder if I even need Highslide.

  19. #19
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One other thing: a lot of the errors from the W3 validator are coming from Wordpress code that was left in because this will need to be converted to a Wordpress template and integrated into a custom WP theme. I can remove it or comment it out and run it through the validator again without the extra WP code.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Cool.
    Was there a question in there?

  21. #21
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Cool.
    Was there a question in there?
    Ha! Well, I was just wondering if I need Highslide at all - if I could use, say, jQuery for the expander?

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    hislide lets you expand multiple slides at once and it also lets you drag the expanded slides into various positions on the screen.
    Do you need this functionality?

  23. #23
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    hislide lets you expand multiple slides at once and it also lets you drag the expanded slides into various positions on the screen.
    Do you need this functionality?
    I actually want it to expand one slide at a time. I don't want users to be able to drag the slides. That would be interesting, but not necessary.

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ok, well there are quite a few plugins that do this sort of thing.
    This one for example: https://github.com/acolangelo/jQuery-Expander

    I would dump highslide and go with one of those.

  25. #25
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Ok, well there are quite a few plugins that do this sort of thing.
    This one for example: https://github.com/acolangelo/jQuery-Expander

    I would dump highslide and go with one of those.
    Unfortunately, I can't really re-write everything at this stage of the game (deadline is fast approaching). Is there any way I can just disable that functionality?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •