carouFredSel (thumbnail slider) implementation issues

JavaScript
1

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

2

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)

<!--[if lte IE7]>

Line 18: your closing script tag is broken.

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

<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

<!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

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

No problem!
Glad you got everything working :slight_smile: