Изображението на слайдшоу се раздува при зареждане на страницата

Току-що добавих плъзгач и въртележка към началната страница на моя уебсайт Volusion. Въпреки това, когато отидох на страницата, първото изображение на въртележка се увеличи до огромен размер (оригиналния размер е само 180 x 270) и мигаше два пъти. Така че прегледах кода и премахнах ред:

<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>

Защото си помислих, че може би се опитва да зареди javascript два пъти или нещо подобно.

След като направих това, изображението на въртележката все още нараства до огромен размер при зареждане, но само веднъж.

Ето страницата, на която се случва: http://www.wallsrepublic.com

Целият подходящ код, който имам на началната си страница, е по-долу:

 <script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>

За основния плъзгач:

    <link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});


$(window).load(function() {
  $(".flexslider").flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});
</script>

<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>

За проблемната въртележка:

    <script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
    <link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
    <script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>


<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
    <div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
        <div class="amazingcarousel-list-container">
            <ul class="amazingcarousel-list">
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK   " ><img src="http://wallsrepublic.com/v/carousel/1.png"  alt="GOLD DAMASK   " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GOLD DAMASK  </div>
    <div class="amazingcarousel-description">$159 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY    " ><img src="http://wallsrepublic.com/v/carousel/2.png"  alt="GREY OVERLAY  " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GREY OVERLAY </div>
    <div class="amazingcarousel-description">$89 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png"  alt="BLACK & WHITE DOGSTOOTH   " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH  </div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png"  alt="BROWN FAWN    " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BROWN FAWN   </div>
    <div class="amazingcarousel-description">$139 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png"  alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">SERENITY SAND</div>
    <div class="amazingcarousel-description">$149 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png"  alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLOCK-STONE GREY</div>
    <div class="amazingcarousel-description">$79 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png"  alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
    <div class="amazingcarousel-description">$79 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png"  alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">TIA GOLD</div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png"  alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
    <div class="amazingcarousel-description">$399 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png"  alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
    <div class="amazingcarousel-description">$89 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png"  alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png"  alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GOLD VICTORIAN</div>
    <div class="amazingcarousel-description">$149 USD</div>
</div>                    </div>
                </li>
            </ul>
            <div class="amazingcarousel-prev"></div>
            <div class="amazingcarousel-next"></div>
        </div>
        <div class="amazingcarousel-nav"></div>
    </div>
</div>

Преди имах javascript и css файловете в заглавката на шаблона си, но след това слайдшоутата не работеха, така че трябваше да ги преместя, за да бъдат директно на началната страница.

Всяка помощ ще бъде оценена.

Jessica Rodriguez 05.03.2015 източник

comment

вместо window.load. Опитайте да използвате готовия dom на jquery. $(документ).готов(функция() {}); - dowomenfart 05.03.2015

comment

@dowomenfart не проработи, все още се държи по същия начин - Jessica Rodriguez 05.03.2015

Отговори (2)

arrow_upward
0
arrow_downward

$(window).load(function() {
$(".flexslider").flexslider();
});

Опитайте се да премахнете тези редове, вие извиквате плъзгача 2 пъти за един и същи клас.

CaRRaSKo 05.03.2015

comment

Когато премахнах тези линии, плъзгачът ми изглеждаше наистина ужасно и спря да работи - Jessica Rodriguez; 05.03.2015

comment

Това е свързано, опитвали ли сте вместо това да заредите js в долната част на страницата? - CaRRaSKo; 06.03.2015

comment

Току-що опитах, за съжаление все още не решава проблема. - Jessica Rodriguez; 06.03.2015

arrow_upward
0
arrow_downward

Не мисля, че това е проблем с Flexslider, който причинява това.

Доколкото мога да преценя, това е причинено от мострата на тапета, показваща се на 100% ширина, преди невероятният плъгин за въртележка да се включи и да обвие изображението до по-малка ширина.

Опитайте да добавите това към вашия стилов лист

.amazingcarousel-item {
    float: left;
    width: 150px;
}

Това ще даде ширина на елемента от въртележката по подразбиране, което от своя страна води до по-малка ширина на изображението в него.

Adam Taylor 12.03.2015

comment

Добре, сега вместо изображението да се увеличава, то показва всички продукти наведнъж, сякаш въртележката не работи правилно, след което се връща към нормалното. Все още мисля, че това изглежда по-добре от увеличеното изображение, но все още не се показва правилно. - Jessica Rodriguez; 13.03.2015

Изображението на слайдшоу се раздува при зареждане на страницата

Отговори (2)

Подобни въпроси