SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    carouFredSel (thumbnail slider) implementation issues.

    I have implemented carouFredSel (with the basic example with next/prev and pagination) into Chrome, Firefox, IE9 and 8. For some reason though when viewing IE7 it seems to me that the plugin does not fire right. It just shows the list going down and does not put it into oveflow hidden or a line where the next and previous buttons will work. Is there something I am missing here?

    I have looked through the installation several times and also tried to implement this on IE7 on a standalone page and was unable to. It seems that the plugin is just not setting up the correct things on IE7 as it does create the class/id's foo2 and iamge_carousel. Does anyone have a different IE7 to try incase it is some settings on my IE7 VHD or help point me in the right direction?

    Thank you for your time. Kamron

    EDIT: http://www.kamsshowcase.com/stws-wp/?page_id=114
    Last edited by kmalik; Sep 14, 2012 at 08:58. Reason: forgot link

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

    Right, where to start?
    I just had a look at the source code of the page you provided and noticed a couple of things.

    Line 17: you're missing a space between the IE and the 7 (should be IE 7, not IE7)
    HTML Code:
    <!--[if lte IE7]>
    Line 18: your closing script tag is broken.
    HTML Code:
    <link rel="stlesheet" type="text/css" href="http://www.kamsshowcase.com/stws-wp/wp-content/themes/stws/inc/style_ie6.css"></script<![endif]-->
    Line 20: you forgot the http.
    HTML Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    So, the reason that your script is dying in IE7 is that you have specified a width for the containing div (#DealContent), but no width for the carousel itself.

    I have made you a stand alone example which runs in IE 7 just fine.
    Hopefully you can drop this into your page and work the rest out from there.
    Also, note the correct way to set the carousel variables in the head section of the document.

    HTH

    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>IE7 Carousel</title>
        <link rel="stylesheet" type="text/css" href="http://www.kamsshowcase.com/stws-wp/wp-content/themes/stws/style.css" media="screen" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script src="http://www.kamsshowcase.com/stws-wp/wp-content/themes/stws/inc/jquery.carouFredSel-5.6.4.js" type="text/javascript"></script>
        
        <script type="text/javascript" language="javascript">
          $(function() {
            $('#foo2').carouFredSel({
              width: 900,
              height: 'auto',
              prev: '#foo2_prev',
              next: '#foo2_next',
              pagination: "#foo2_pag",
              auto: false
            });
          });
        </script>
      </head>
        
      <body>
        <div class="image_carousel">
          <div id="foo2">
            <img src="http://www.kamsshowcase.com/stws-wp/wp-content/uploads/2012/09/Apt_Complex_thumbnail.jpg" alt="basketball" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/stws-wp/wp-content/uploads/2012/09/ReverseMortgage_thumbnail.jpg" alt="beachtree" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/stws-wp/wp-content/uploads/2012/09/KM_thumbnail.jpg" alt="cupcackes" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/stws-wp/wp-content/uploads/2012/09/CygnetStudios_thumbnail.jpg" alt="hangmat" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
            <img src="http://www.kamsshowcase.com/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
          </div>
          <div class="clearfix"></div>
          <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
          <a class="next" id="foo2_next" href="#"><span>next</span></a>
          <div class="pagination" id="foo2_pag"></div>
        </div>
      </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    Thank you for pointing out those scripting errors. I can't believe I did not catch them before. Also thank you for your code. It has helped me greatly and now everything seems to work well.

    Thank you again for taking the time to look over the problem.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No problem!
    Glad you got everything working


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
  •