caroufredsel margin auto

check for image artifacts in chrome

HTML

<link rel="stylesheet" href="http://gastraserv.dyndns.org/foto-glasow/plugins/system/imagesizer/lbscripts/fancybox/jquery.fancybox.css">
<script src="//cdn.jsdelivr.net/caroufredsel/6.2.0/jquery.carouFredSel-6.2.0-packed.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.4/jquery.fancybox.css">
<div class="image_carousel">
    <div id="foo100"> <a class="pag" rel="fancybox" href="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/big/1.jpg" style="">
      <img src="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/1.jpg" alt="1.jpg" width="600" height="450">
    </a>
 <a rel="fancybox" href="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/big/1a.jpg" style="">
      <img src="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/1a.jpg" alt="1a.jpg" width="350" height="450">
    </a>
 <a class="pag" rel="fancybox" href="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/big/2.jpg" style="">
      <img src="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/2.jpg" alt="2.jpg" width="350" height="450">
    </a>
 <a rel="fancybox" href="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/big/2a.jpg" style="">
      <img src="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/2a.jpg" alt="2a.jpg" width="600" height="450">
    </a>
 <a class="pag" rel="fancybox" href="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/big/3.jpg" style="">
      <img src="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/3.jpg" alt="3.jpg" width="450" height="450">
    </a>
 <a rel="fancybox" href="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/big/3a.jpg" style="">
      <img src="http://gastraserv.dyndns.org/foto-glasow/images/bilder/hochzeit/carousel/3a.jpg" alt="3a.jpg" width="450" height="450">
    </a>
 <a...

CSS

.image_carousel {
    background: #fff;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 750px;
    height: 355px;
    margin: 0 auto;
}
.image_carousel img {
    height: 300px;
    width: auto;
    display: block;
    float: left;
    margin: 7px;
    border: 1px solid #eee;
    background-color: white;
    padding: 9px;
}
.image_carousel a {
    display: block;
    float: left;
}

JavaScript

= setTvar delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();
jQuery(window).load(function () {
    startcarousel();
    jQuery("#foo100 a").fancybox({
        cyclic: true
    });
});
jQuery(window).resize(function () {
    delay(function () {
        startcarousel();
    }, 300);
});

function startcarousel() {
    var carousel = jQuery("#foo100");
    carousel.carouFredSel({
        width: "100%",
        auto: false,
        scroll: 500
    });

    jQuery('.next').click(function () {
        jQuery("#foo100").trigger("next", jQuery("a").next(".pag"));
        return false;
    });
    jQuery('.prev').click(function () {
        jQuery("#foo100").trigger("prev", jQuery("a").prev(".pag"));
        return false;
    });
}