Images keeping loading vertically...

Hello guys. I have a problem where the images keep loading vertically before the page loads. They do this both on product info pages which have additional images, and on the main page where I have a featured products slider. I believe it is related to my template (it is a template called genesis). I cannot figure out how to remedy this for nothing, if anyone has any ideas, please let me know. The effect I am talking about can be seen here: http://www.oldworldarchery.com/takedown-risers-c-138_16_144/samick-sage-riser-right-handed-p-417.html

Try turning on your page parse time
admin > config > Logging > Display The Page Parse Time

It might be that your server is slow to deliver complete page details

I don't think that's the problem, after I purchased this template I went to the website the template was sold on and viewed the demo, and sure enough the demo had the same problem. I think it might be the "image carousel" thing, I have the same problem on my home page with the featured products slider. I'd like to replace both the additional image slider and the featured products slider, but I'm not sure how at this point...

Is it a javascript thing? When i get rid of jscript_cloud-zoom.1.0.2.min.js the images seem to stay vertical for a long time as it loads...

See if this helps

http://stackoverflow.com/questions/11658605/how-to-get-bxslider-to-hide-the-slides-until-the-page-loads

Similar problem

lruskauff:

See if this helps

http://stackoverflow.com/questions/11658605/how-to-get-bxslider-to-hide-the-slides-until-the-page-loads

Similar problem

Thank you!, I will give this a look...

Here are the contents of /includes/templates/genesis/templates/tpl_modules_additional_images.php

<?php
/**
 * Module Template:
 * Loaded by product-type template to display additional product images.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [url]http://www.zen-cart.com/license/2_0.txt[/url] GNU Public License V2.0
 * @version $Id: tpl_modules_additional_images.php 3215 2006-03-20 06:05:55Z birdbrain $
 */

  require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));
 ?>
 <?php
 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {
  ?>
<div class="additionalImagesCarousel carousel-wrapper">
<div id="productAdditionalImages" class="relative">
<ul class="slides">
<?php
  require($template->get_template_dir('tpl_columnar_display_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display_additional_images.php'); ?>
</ul>
</div>
</div>
<script type="text/javascript"><!--
$(window).load(function() {
	$('#productAdditionalImages').flexslider({
		namespace: "flex-",
		slideshow: false,
		animation: "slide",
	    animationLoop: false,
		pauseOnHover: true,
        directionNav: true,
        controlNav: false,
 		prevText: '<i class="icon-angle-left"></i>',
 		nextText: '<i class="icon-angle-right"></i>',
		itemWidth: 100
	});
});
--></script> 
<?php 
  }
?>

I am guessing I the javascript flexslider is my addtional image carousel. I have a .css file in my templates css folder called stylesheet_flexslider.css, and here are the contents of that:

/*
 * jQuery flexSlider v2.0
 * [url]http://www.woothemes.com/flexslider/[/url]
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * [url]http://www.gnu.org/licenses/gpl-2.0.html[/url]
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0; margin-bottom: 20px; }
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a { font-size: 1.8em; background: none; color: #444444; text-align: center; position: absolute; top: 12px; z-index: 10; cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.flex-direction-nav a:hover { text-decoration: none; color: #409F89; }
.flex-direction-nav .flex-next {background-position: 100% 0; right: -5px; }
.flex-direction-nav .flex-prev {left: -5px;}
.flexslider:hover .flex-next {opacity: 1;}
.flexslider:hover .flex-prev {opacity: 1;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled, .flex-direction-nav .flex-disabled:hover {color: #aaaaaa; visibility:hidden }

/* Control Nav */
.flex-control-nav {position: absolute; bottom: 20px; right:20px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 12px; height: 12px; display: block; background: #efefef; border: 3px solid #efefef; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.flex-control-paging li a:hover { background: #107fc9; }
.flex-control-paging li a.flex-active { background: #107fc9; cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

/* Direction Nav */
.big-direction-nav {*height: 0; margin: 0; list-style: none }
.big-direction-nav a { font-size: 30px; background: #d6d6d6; color: #111111; width: 50px; height: 50px;  display: block; line-height: 50px; text-align: center; background: #efefef; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; position: absolute; top: 50%; z-index: 10; cursor: pointer; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.big-direction-nav a:hover { text-decoration: none; color: #ffffff; background: #409F89; }
.big-direction-nav a.big-prev i {  }
.big-direction-nav a.big-next i {  }
.big-direction-nav .big-next {background-position: 100% 0; right: 20px; }
.big-direction-nav .big-prev {left: 20px;}
.flexslider:hover .big-next {opacity: 1;}
.flexslider:hover .big-prev {opacity: 1;}
.flexslider:hover .big-next:hover, .flexslider:hover .big-prev:hover {opacity: 1;}
.big-direction-nav .big-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.big-control-nav {position: absolute; bottom: 20px; right:20px; text-align: center;}
.big-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.big-control-paging li a {width: 12px; height: 12px; display: block; background: #d6d6d6; border: 3px solid #d6d6d6; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.big-control-paging li a:hover { background: #409F89; }
.big-control-paging li a.big-active { background: #409F89; cursor: default; }

.big-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.big-control-thumbs li {width: 25%; float: left; margin: 0;}
.big-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.big-control-thumbs img:hover {opacity: 1;}
.big-control-thumbs .big-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
  .big-direction-nav .big-prev {opacity: 1; left: 10px;}
  .big-direction-nav .big-next {opacity: 1; right: 10px;}  
}

I also have a (HUGE) javascript file in the javascript folder of this template. I have no idea if this would be of help, but here goes... (I hate javascript, I do not understand one lick of it)

/*
 * jQuery FlexSlider v2.1
 * Copyright 2012 WooThemes
 * Contributing Author: Tyler Smith
 */
 ;(function(d){d.flexslider=function(i,k){var a=d(i),c=d.extend({},d.flexslider.defaults,k),e=c.namespace,p="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,t=p?"touchend":"click",l="vertical"===c.direction,m=c.reverse,h=0<c.itemWidth,r="fade"===c.animation,s=""!==c.asNavFor,f={};d.data(i,"flexslider",a);f={init:function(){a.animating=!1;a.currentSlide=c.startAt;a.animatingTo=a.currentSlide;a.atEnd=0===a.currentSlide||a.currentSlide===a.last;a.containerSelector=c.selector.substr(0,
 c.selector.search(" "));a.slides=d(c.selector,a);a.container=d(a.containerSelector,a);a.count=a.slides.length;a.syncExists=0<d(c.sync).length;"slide"===c.animation&&(c.animation="swing");a.prop=l?"top":"marginLeft";a.args={};a.manualPause=!1;var b=a,g;if(g=!c.video)if(g=!r)if(g=c.useCSS)a:{g=document.createElement("div");var n=["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"],e;for(e in n)if(void 0!==g.style[n[e]]){a.pfx=n[e].replace("Perspective","").toLowerCase();
 a.prop="-"+a.pfx+"-transform";g=!0;break a}g=!1}b.transitions=g;""!==c.controlsContainer&&(a.controlsContainer=0<d(c.controlsContainer).length&&d(c.controlsContainer));""!==c.manualControls&&(a.manualControls=0<d(c.manualControls).length&&d(c.manualControls));c.randomize&&(a.slides.sort(function(){return Math.round(Math.random())-0.5}),a.container.empty().append(a.slides));a.doMath();s&&f.asNav.setup();a.setup("init");c.controlNav&&f.controlNav.setup();c.directionNav&&f.directionNav.setup();c.keyboard&&
 (1===d(a.containerSelector).length||c.multipleKeyboard)&&d(document).bind("keyup",function(b){b=b.keyCode;if(!a.animating&&(39===b||37===b))b=39===b?a.getTarget("next"):37===b?a.getTarget("prev"):!1,a.flexAnimate(b,c.pauseOnAction)});c.mousewheel&&a.bind("mousewheel",function(b,g){b.preventDefault();var d=0>g?a.getTarget("next"):a.getTarget("prev");a.flexAnimate(d,c.pauseOnAction)});c.pausePlay&&f.pausePlay.setup();c.slideshow&&(c.pauseOnHover&&a.hover(function(){!a.manualPlay&&!a.manualPause&&a.pause()},
 function(){!a.manualPause&&!a.manualPlay&&a.play()}),0<c.initDelay?setTimeout(a.play,c.initDelay):a.play());p&&c.touch&&f.touch();(!r||r&&c.smoothHeight)&&d(window).bind("resize focus",f.resize);setTimeout(function(){c.start(a)},200)},asNav:{setup:function(){a.asNav=!0;a.animatingTo=Math.floor(a.currentSlide/a.move);a.currentItem=a.currentSlide;a.slides.removeClass(e+"active-slide").eq(a.currentItem).addClass(e+"active-slide");a.slides.click(function(b){b.preventDefault();var b=d(this),g=b.index();
 !d(c.asNavFor).data("flexslider").animating&&!b.hasClass("active")&&(a.direction=a.currentItem<g?"next":"prev",a.flexAnimate(g,c.pauseOnAction,!1,!0,!0))})}},controlNav:{setup:function(){a.manualControls?f.controlNav.setupManual():f.controlNav.setupPaging()},setupPaging:function(){var b=1,g;a.controlNavScaffold=d('<ol class="'+e+"control-nav "+e+("thumbnails"===c.controlNav?"control-thumbs":"control-paging")+'"></ol>');if(1<a.pagingCount)for(var n=0;n<a.pagingCount;n++)g="thumbnails"===c.controlNav?
 '<img src="'+a.slides.eq(n).attr("data-thumb")+'"/>':"<a>"+b+"</a>",a.controlNavScaffold.append("<li>"+g+"</li>"),b++;a.controlsContainer?d(a.controlsContainer).append(a.controlNavScaffold):a.append(a.controlNavScaffold);f.controlNav.set();f.controlNav.active();a.controlNavScaffold.delegate("a, img",t,function(b){b.preventDefault();var b=d(this),g=a.controlNav.index(b);b.hasClass(e+"active")||(a.direction=g>a.currentSlide?"next":"prev",a.flexAnimate(g,c.pauseOnAction))});p&&a.controlNavScaffold.delegate("a",
 "click touchstart",function(a){a.preventDefault()})},setupManual:function(){a.controlNav=a.manualControls;f.controlNav.active();a.controlNav.live(t,function(b){b.preventDefault();var b=d(this),g=a.controlNav.index(b);b.hasClass(e+"active")||(g>a.currentSlide?a.direction="next":a.direction="prev",a.flexAnimate(g,c.pauseOnAction))});p&&a.controlNav.live("click touchstart",function(a){a.preventDefault()})},set:function(){a.controlNav=d("."+e+"control-nav li "+("thumbnails"===c.controlNav?"img":"a"),
 a.controlsContainer?a.controlsContainer:a)},active:function(){a.controlNav.removeClass(e+"active").eq(a.animatingTo).addClass(e+"active")},update:function(b,c){1<a.pagingCount&&"add"===b?a.controlNavScaffold.append(d("<li><a>"+a.count+"</a></li>")):1===a.pagingCount?a.controlNavScaffold.find("li").remove():a.controlNav.eq(c).closest("li").remove();f.controlNav.set();1<a.pagingCount&&a.pagingCount!==a.controlNav.length?a.update(c,b):f.controlNav.active()}},directionNav:{setup:function(){var b=d('<ul class="'+
 e+'direction-nav"><li><a class="'+e+'prev" href="#">'+c.prevText+'</a></li><li><a class="'+e+'next" href="#">'+c.nextText+"</a></li></ul>");a.controlsContainer?(d(a.controlsContainer).append(b),a.directionNav=d("."+e+"direction-nav li a",a.controlsContainer)):(a.append(b),a.directionNav=d("."+e+"direction-nav li a",a));f.directionNav.update();a.directionNav.bind(t,function(b){b.preventDefault();b=d(this).hasClass(e+"next")?a.getTarget("next"):a.getTarget("prev");a.flexAnimate(b,c.pauseOnAction)});
 p&&a.directionNav.bind("click touchstart",function(a){a.preventDefault()})},update:function(){var b=e+"disabled";1===a.pagingCount?a.directionNav.addClass(b):c.animationLoop?a.directionNav.removeClass(b):0===a.animatingTo?a.directionNav.removeClass(b).filter("."+e+"prev").addClass(b):a.animatingTo===a.last?a.directionNav.removeClass(b).filter("."+e+"next").addClass(b):a.directionNav.removeClass(b)}},pausePlay:{setup:function(){var b=d('<div class="'+e+'pauseplay"><a></a></div>');a.controlsContainer?
 (a.controlsContainer.append(b),a.pausePlay=d("."+e+"pauseplay a",a.controlsContainer)):(a.append(b),a.pausePlay=d("."+e+"pauseplay a",a));f.pausePlay.update(c.slideshow?e+"pause":e+"play");a.pausePlay.bind(t,function(b){b.preventDefault();d(this).hasClass(e+"pause")?(a.manualPause=!0,a.manualPlay=!1,a.pause()):(a.manualPause=!1,a.manualPlay=!0,a.play())});p&&a.pausePlay.bind("click touchstart",function(a){a.preventDefault()})},update:function(b){"play"===b?a.pausePlay.removeClass(e+"pause").addClass(e+
 "play").text(c.playText):a.pausePlay.removeClass(e+"play").addClass(e+"pause").text(c.pauseText)}},touch:function(){function b(b){j=l?d-b.touches[0].pageY:d-b.touches[0].pageX;p=l?Math.abs(j)<Math.abs(b.touches[0].pageX-e):Math.abs(j)<Math.abs(b.touches[0].pageY-e);if(!p||500<Number(new Date)-k)b.preventDefault(),!r&&a.transitions&&(c.animationLoop||(j/=0===a.currentSlide&&0>j||a.currentSlide===a.last&&0<j?Math.abs(j)/q+2:1),a.setProps(f+j,"setTouch"))}function g(){i.removeEventListener("touchmove",
 b,!1);if(a.animatingTo===a.currentSlide&&!p&&null!==j){var h=m?-j:j,l=0<h?a.getTarget("next"):a.getTarget("prev");a.canAdvance(l)&&(550>Number(new Date)-k&&50<Math.abs(h)||Math.abs(h)>q/2)?a.flexAnimate(l,c.pauseOnAction):r||a.flexAnimate(a.currentSlide,c.pauseOnAction,!0)}i.removeEventListener("touchend",g,!1);f=j=e=d=null}var d,e,f,q,j,k,p=!1;i.addEventListener("touchstart",function(j){a.animating?j.preventDefault():1===j.touches.length&&(a.pause(),q=l?a.h:a.w,k=Number(new Date),f=h&&m&&a.animatingTo===
 a.last?0:h&&m?a.limit-(a.itemW+c.itemMargin)*a.move*a.animatingTo:h&&a.currentSlide===a.last?a.limit:h?(a.itemW+c.itemMargin)*a.move*a.currentSlide:m?(a.last-a.currentSlide+a.cloneOffset)*q:(a.currentSlide+a.cloneOffset)*q,d=l?j.touches[0].pageY:j.touches[0].pageX,e=l?j.touches[0].pageX:j.touches[0].pageY,i.addEventListener("touchmove",b,!1),i.addEventListener("touchend",g,!1))},!1)},resize:function(){!a.animating&&a.is(":visible")&&(h||a.doMath(),r?f.smoothHeight():h?(a.slides.width(a.computedW),
 a.update(a.pagingCount),a.setProps()):l?(a.viewport.height(a.h),a.setProps(a.h,"setTotal")):(c.smoothHeight&&f.smoothHeight(),a.newSlides.width(a.computedW),a.setProps(a.computedW,"setTotal")))},smoothHeight:function(b){if(!l||r){var c=r?a:a.viewport;b?c.animate({height:a.slides.eq(a.animatingTo).height()},b):c.height(a.slides.eq(a.animatingTo).height())}},sync:function(b){var g=d(c.sync).data("flexslider"),e=a.animatingTo;switch(b){case "animate":g.flexAnimate(e,c.pauseOnAction,!1,!0);break;case "play":!g.playing&&
 !g.asNav&&g.play();break;case "pause":g.pause()}}};a.flexAnimate=function(b,g,n,i,k){s&&1===a.pagingCount&&(a.direction=a.currentItem<b?"next":"prev");if(!a.animating&&(a.canAdvance(b,k)||n)&&a.is(":visible")){if(s&&i)if(n=d(c.asNavFor).data("flexslider"),a.atEnd=0===b||b===a.count-1,n.flexAnimate(b,!0,!1,!0,k),a.direction=a.currentItem<b?"next":"prev",n.direction=a.direction,Math.ceil((b+1)/a.visible)-1!==a.currentSlide&&0!==b)a.currentItem=b,a.slides.removeClass(e+"active-slide").eq(b).addClass(e+
 "active-slide"),b=Math.floor(b/a.visible);else return a.currentItem=b,a.slides.removeClass(e+"active-slide").eq(b).addClass(e+"active-slide"),!1;a.animating=!0;a.animatingTo=b;c.before(a);g&&a.pause();a.syncExists&&!k&&f.sync("animate");c.controlNav&&f.controlNav.active();h||a.slides.removeClass(e+"active-slide").eq(b).addClass(e+"active-slide");a.atEnd=0===b||b===a.last;c.directionNav&&f.directionNav.update();b===a.last&&(c.end(a),c.animationLoop||a.pause());if(r)p?(a.slides.eq(a.currentSlide).css({opacity:0,
 zIndex:1}),a.slides.eq(b).css({opacity:1,zIndex:2}),a.slides.unbind("webkitTransitionEnd transitionend"),a.slides.eq(a.currentSlide).bind("webkitTransitionEnd transitionend",function(){c.after(a)}),a.animating=!1,a.currentSlide=a.animatingTo):(a.slides.eq(a.currentSlide).fadeOut(c.animationSpeed,c.easing),a.slides.eq(b).fadeIn(c.animationSpeed,c.easing,a.wrapup));else{var q=l?a.slides.filter(":first").height():a.computedW;h?(b=c.itemWidth>a.w?2*c.itemMargin:c.itemMargin,b=(a.itemW+b)*a.move*a.animatingTo,
 b=b>a.limit&&1!==a.visible?a.limit:b):b=0===a.currentSlide&&b===a.count-1&&c.animationLoop&&"next"!==a.direction?m?(a.count+a.cloneOffset)*q:0:a.currentSlide===a.last&&0===b&&c.animationLoop&&"prev"!==a.direction?m?0:(a.count+1)*q:m?(a.count-1-b+a.cloneOffset)*q:(b+a.cloneOffset)*q;a.setProps(b,"",c.animationSpeed);if(a.transitions){if(!c.animationLoop||!a.atEnd)a.animating=!1,a.currentSlide=a.animatingTo;a.container.unbind("webkitTransitionEnd transitionend");a.container.bind("webkitTransitionEnd transitionend",
 function(){a.wrapup(q)})}else a.container.animate(a.args,c.animationSpeed,c.easing,function(){a.wrapup(q)})}c.smoothHeight&&f.smoothHeight(c.animationSpeed)}};a.wrapup=function(b){!r&&!h&&(0===a.currentSlide&&a.animatingTo===a.last&&c.animationLoop?a.setProps(b,"jumpEnd"):a.currentSlide===a.last&&(0===a.animatingTo&&c.animationLoop)&&a.setProps(b,"jumpStart"));a.animating=!1;a.currentSlide=a.animatingTo;c.after(a)};a.animateSlides=function(){a.animating||a.flexAnimate(a.getTarget("next"))};a.pause=
 function(){clearInterval(a.animatedSlides);a.playing=!1;c.pausePlay&&f.pausePlay.update("play");a.syncExists&&f.sync("pause")};a.play=function(){a.animatedSlides=setInterval(a.animateSlides,c.slideshowSpeed);a.playing=!0;c.pausePlay&&f.pausePlay.update("pause");a.syncExists&&f.sync("play")};a.canAdvance=function(b,g){var d=s?a.pagingCount-1:a.last;return g?!0:s&&a.currentItem===a.count-1&&0===b&&"prev"===a.direction?!0:s&&0===a.currentItem&&b===a.pagingCount-1&&"next"!==a.direction?!1:b===a.currentSlide&&
 !s?!1:c.animationLoop?!0:a.atEnd&&0===a.currentSlide&&b===d&&"next"!==a.direction?!1:a.atEnd&&a.currentSlide===d&&0===b&&"next"===a.direction?!1:!0};a.getTarget=function(b){a.direction=b;return"next"===b?a.currentSlide===a.last?0:a.currentSlide+1:0===a.currentSlide?a.last:a.currentSlide-1};a.setProps=function(b,g,d){var e,f=b?b:(a.itemW+c.itemMargin)*a.move*a.animatingTo;e=-1*function(){if(h)return"setTouch"===g?b:m&&a.animatingTo===a.last?0:m?a.limit-(a.itemW+c.itemMargin)*a.move*a.animatingTo:a.animatingTo===
 a.last?a.limit:f;switch(g){case "setTotal":return m?(a.count-1-a.currentSlide+a.cloneOffset)*b:(a.currentSlide+a.cloneOffset)*b;case "setTouch":return b;case "jumpEnd":return m?b:a.count*b;case "jumpStart":return m?a.count*b:b;default:return b}}()+"px";a.transitions&&(e=l?"translate3d(0,"+e+",0)":"translate3d("+e+",0,0)",d=void 0!==d?d/1E3+"s":"0s",a.container.css("-"+a.pfx+"-transition-duration",d));a.args[a.prop]=e;(a.transitions||void 0===d)&&a.container.css(a.args)};a.setup=function(b){if(r)a.slides.css({width:"100%",
 "float":"left",marginRight:"-100%",position:"relative"}),"init"===b&&(p?a.slides.css({opacity:0,display:"block",webkitTransition:"opacity "+c.animationSpeed/1E3+"s ease",zIndex:1}).eq(a.currentSlide).css({opacity:1,zIndex:2}):a.slides.eq(a.currentSlide).fadeIn(c.animationSpeed,c.easing)),c.smoothHeight&&f.smoothHeight();else{var g,n;"init"===b&&(a.viewport=d('<div class="'+e+'viewport"></div>').css({overflow:"hidden",position:"relative"}).appendTo(a).append(a.container),a.cloneCount=0,a.cloneOffset=
 0,m&&(n=d.makeArray(a.slides).reverse(),a.slides=d(n),a.container.empty().append(a.slides)));c.animationLoop&&!h&&(a.cloneCount=2,a.cloneOffset=1,"init"!==b&&a.container.find(".clone").remove(),a.container.append(a.slides.first().clone().addClass("clone")).prepend(a.slides.last().clone().addClass("clone")));a.newSlides=d(c.selector,a);g=m?a.count-1-a.currentSlide+a.cloneOffset:a.currentSlide+a.cloneOffset;l&&!h?(a.container.height(200*(a.count+a.cloneCount)+"%").css("position","absolute").width("100%"),
 setTimeout(function(){a.newSlides.css({display:"block"});a.doMath();a.viewport.height(a.h);a.setProps(g*a.h,"init")},"init"===b?100:0)):(a.container.width(200*(a.count+a.cloneCount)+"%"),a.setProps(g*a.computedW,"init"),setTimeout(function(){a.doMath();a.newSlides.css({width:a.computedW,"float":"left",display:"block"});c.smoothHeight&&f.smoothHeight()},"init"===b?100:0))}h||a.slides.removeClass(e+"active-slide").eq(a.currentSlide).addClass(e+"active-slide")};a.doMath=function(){var b=a.slides.first(),
 d=c.itemMargin,e=c.minItems,f=c.maxItems;a.w=a.width();a.h=b.height();a.boxPadding=b.outerWidth()-b.width();h?(a.itemT=c.itemWidth+d,a.minW=e?e*a.itemT:a.w,a.maxW=f?f*a.itemT:a.w,a.itemW=a.minW>a.w?(a.w-d*e)/e:a.maxW<a.w?(a.w-d*f)/f:c.itemWidth>a.w?a.w:c.itemWidth,a.visible=Math.floor(a.w/(a.itemW+d)),a.move=0<c.move&&c.move<a.visible?c.move:a.visible,a.pagingCount=Math.ceil((a.count-a.visible)/a.move+1),a.last=a.pagingCount-1,a.limit=1===a.pagingCount?0:c.itemWidth>a.w?(a.itemW+2*d)*a.count-a.w-
 d:(a.itemW+d)*a.count-a.w-d):(a.itemW=a.w,a.pagingCount=a.count,a.last=a.count-1);a.computedW=a.itemW-a.boxPadding};a.update=function(b,d){a.doMath();h||(b<a.currentSlide?a.currentSlide+=1:b<=a.currentSlide&&0!==b&&(a.currentSlide-=1),a.animatingTo=a.currentSlide);if(c.controlNav&&!a.manualControls)if("add"===d&&!h||a.pagingCount>a.controlNav.length)f.controlNav.update("add");else if("remove"===d&&!h||a.pagingCount<a.controlNav.length)h&&a.currentSlide>a.last&&(a.currentSlide-=1,a.animatingTo-=1),
 f.controlNav.update("remove",a.last);c.directionNav&&f.directionNav.update()};a.addSlide=function(b,e){var f=d(b);a.count+=1;a.last=a.count-1;l&&m?void 0!==e?a.slides.eq(a.count-e).after(f):a.container.prepend(f):void 0!==e?a.slides.eq(e).before(f):a.container.append(f);a.update(e,"add");a.slides=d(c.selector+":not(.clone)",a);a.setup();c.added(a)};a.removeSlide=function(b){var e=isNaN(b)?a.slides.index(d(b)):b;a.count-=1;a.last=a.count-1;isNaN(b)?d(b,a.slides).remove():l&&m?a.slides.eq(a.last).remove():
 a.slides.eq(b).remove();a.doMath();a.update(e,"remove");a.slides=d(c.selector+":not(.clone)",a);a.setup();c.removed(a)};f.init()};d.flexslider.defaults={namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:!1,animationLoop:!0,smoothHeight:!1,startAt:0,slideshow:!0,slideshowSpeed:7E3,animationSpeed:600,initDelay:0,randomize:!1,pauseOnAction:!0,pauseOnHover:!1,useCSS:!0,touch:!0,video:!1,controlNav:!0,directionNav:!0,prevText:"Previous",nextText:"Next",
 keyboard:!0,multipleKeyboard:!1,mousewheel:!1,pausePlay:!1,pauseText:"Pause",playText:"Play",controlsContainer:"",manualControls:"",sync:"",asNavFor:"",itemWidth:0,itemMargin:0,minItems:0,maxItems:0,move:0,start:function(){},before:function(){},after:function(){},end:function(){},added:function(){},removed:function(){}};d.fn.flexslider=function(i){void 0===i&&(i={});if("object"===typeof i)return this.each(function(){var a=d(this),c=a.find(i.selector?i.selector:".slides > li");1===c.length?(c.fadeIn(400),
 i.start&&i.start(a)):void 0==a.data("flexslider")&&new d.flexslider(this,i)});var k=d(this).data("flexslider");switch(i){case "play":k.play();break;case "pause":k.pause();break;case "next":k.flexAnimate(k.getTarget("next"),!0);break;case "prev":case "previous":k.flexAnimate(k.getTarget("prev"),!0);break;default:"number"===typeof i&&k.flexAnimate(i,!0)}}})(jQuery);

First try renaming the file at
/includes/templates/genesis/templates/tpl_modules_additional_images.php

to

/includes/templates/genesis/templates/tpl_modules_additional_images.off

The stock file will be used in it's place

kobra:

First try renaming the file at
/includes/templates/genesis/templates/tpl_modules_additional_images.php

to

/includes/templates/genesis/templates/tpl_modules_additional_images.off

The stock file will be used in it's place

Ok, will go try that real quick and post back with results! Thanks! (I think I did try that before though, and the loading problem is gone, but the images stack in a rows of two. I believe because of the wrapper used in tpl_products_display.php or something like that, I might of got the php filename wrong)

Yup, it does away with the loading problem. But then they stack in rows of two, where I would like them to be all in one row. Or possibly use a different image carousel that doesn't load weird. But if I could just adjust the wrapper to where they are in one row, than that would work fine too. Here's an image of what the results look like:

You can go here and check it out for yourself as well:

http://www.oldworldarchery.com/takedown-risers-c-138_16_144/samick-sage-riser-right-handed-p-417.html

EDIT: It was tpl_product_info_display.php where I believe the wrapper was that adjusted it, I just could not get it to work right for me. Here is the contents of tpl_product_info_display.php:

<?php
/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=product_info.<br />
 * Displays details of a typical product
 *
 * @package templateSystem
 * @copyright Copyright 2003-2011 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_product_info_display.php 19690 2011-10-04 16:41:45Z drbyte $
 */
 //require(DIR_WS_MODULES . '/debug_blocks/product_info_prices.php');
?>
<div class="centerColumn" id="productGeneral">

<!--bof Form start-->
<?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product', $request_type), 'post', 'enctype="multipart/form-data"') . "\n"; ?>
<!--eof Form start-->

<?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?>

<?php require(DIR_WS_MODULES . 'genesis/product_info_rating.php'); ?>
    
<!--bof Category Icon -->
<?php if ($module_show_categories != 0) {?>
<?php
/**
 * display the category icons
 */
require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?>
<?php } ?>
<!--eof Category Icon -->

<!--bof Prev/Next top position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
 * display the product previous/next helper
 */
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next top position-->

<div class="productInfoWrapper row-fluid">
    <div class="productInfoLeft span5 centeredContent">
    <!--bof Main Product Image -->
    <?php
      if (zen_not_null($products_image)) {
      ?>
    <?php
    /**
     * display the main product image
     */
       require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
    <?php
      }
    ?>
    <!--eof Main Product Image-->
        
    <!--bof Additional Product Images -->
  
	<?php
    /**
     * display the products additional images
     */
      require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
    <!--eof Additional Product Images -->    
    </div>
    <div class="productInfoRight span7">
        <!--bof Product Name-->
        <h1 id="productName" class="productGeneral nomargin"><?php echo $products_name; ?></h1>
        <!--eof Product Name-->

        <?php if ($flag_show_product_info_reviews_count == 1) { ?>
        <!--bof-Reviews-->
        <p class="rating">
            <?php for($i=1;$i<=5;$i++){ ?>
				<?php if($i<=round($avg)){ ?>
					<span class="yellow"><i class="icon-star"></i></span>
				<?php }else{ ?>
					<i class="icon-star"></i>	
				<?php } ?>
			 <?php } ?>
         <span class="reviewers"><?php echo $reviews->fields['count'] . TEXT_TOTAL_REVIEWERS; ?></span>   
        </p>
        <!--eof-Reviews-->
        <?php } ?>

        <!--bof Product Price block -->
        <h3 id="productPrices" class="productGeneral">
        <?php
        // base price
          if ($show_onetime_charges_description == 'true') {
            $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span>';
          } else {
            $one_time = '';
          }
          echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
        ?></h3>
        <!--eof Product Price block -->
        
        <hr />
        
        <!--bof Attributes Module -->
        <?php
          if ($pr_attr->fields['total'] > 0) {
        ?>
        <?php
        /**
         * display the product atributes
         */
          require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
        <?php
          }
        ?>
        <!--eof Attributes Module -->
        
        <!--bof Add to Cart Box -->
        <?php
        if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
          // do nothing
        } else {
        ?>
                    <?php
            $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
                    if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
                      // hide the quantity box and default to 1
                      $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
                    } else {
                      // show the quantity box
            $the_button = '<div class="qty-box m-input-prepend"><span class="add-on">'. PRODUCTS_ORDER_QTY_TEXT . '</span><input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" class="m-wrap"/></div>' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . '<input type="submit" class="button large add-cart" value="'.BUTTON_IN_CART_ALT.'" />';
                    }
            $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
          ?>
          <?php if ($display_qty != '' or $display_button != '') { ?>
            <div id="cartAdd">
            <?php
              echo $display_qty;
              echo $display_button;
                    ?>
                  </div>
          <?php } // display qty and button ?>
        <?php } // CUSTOMERS_APPROVAL == 3 ?>
        <!--eof Add to Cart Box-->
        
        <hr />
        
        <div class="productSharing">
            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style ">
            <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
            <a class="addthis_button_tweet"></a>
            <a class="addthis_button_pinterest_pinit"></a>
            <a class="addthis_counter addthis_pill_style"></a>
            </div>
            <script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50f91d284f3e8dba"></script>
            <!-- AddThis Button END -->
        </div>
        
        <!--bof free ship icon  -->
        <?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
        <div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
        <?php } ?>
        <!--eof free ship icon  -->
    </div>
</div>

<div class="productInfoTabs">
<ul class="nav nav-tabs">
    <li class="active"><a href="#description" data-toggle="tab" class="first"><?php echo TEXT_PRODUCTS_DESCRIPTION; ?></a></li>
    <li><a href="#prodInformation" data-toggle="tab"><?php echo TEXT_PRODUCTS_INFORMATION; ?></a></li>
    <?php if ($flag_show_product_info_reviews == 1) { ?>
    <li><a href="#prodReviews" data-toggle="tab"><?php echo TEXT_PRODUCTS_REVIEW . ' ' . '('.$reviews->fields['count'].')'; ?></a></li>
    <?php } ?>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="description">
        <!--bof Product description -->
        <?php if ($products_description != '') { ?>
        <div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
        <?php } ?>
        <!--eof Product description -->
    </div>
    <div class="tab-pane" id="prodInformation">
    <!--bof Product details list  -->
        <?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
        <ul id="productDetailsList" class="nomargin">
          <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
          <?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT .  $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>'  : '') . "\n"; ?>
          <?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>'  : '') . "\n"; ?>
          <?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
        </ul>
        <?php
          }
        ?>
    <!--eof Product details list -->
        <!--bof Quantity Discounts table -->
        <?php
          if ($products_discount_type != 0) { ?>
        <?php
        /**
         * display the products quantity discount
         */
         require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?>
        <?php
          }
        ?>
        <!--eof Quantity Discounts table -->
        <!--bof Product date added/available-->
        <?php
          if ($products_date_available > date('Y-m-d H:i:s')) {
            if ($flag_show_product_info_date_available == 1) {
        ?>
          <br /><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?>
        <?php
            }
          } else {
            if ($flag_show_product_info_date_added == 1) {
        ?>
              <br /><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?>
        <?php
            } // $flag_show_product_info_date_added
          }
        ?>
        <!--eof Product date added/available -->
        
        <!--bof Product URL -->
        <?php
          if (zen_not_null($products_url)) {
            if ($flag_show_product_info_url == 1) {
        ?>
            <br /><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?>
        <?php
            } // $flag_show_product_info_url
          }
        ?>
        <!--eof Product URL -->        
    </div>
    <div class="tab-pane" id="prodReviews">
        <div id="reviews_list">
            <?php if($reviews_detail->RecordCount() > 0){
			    while(!$reviews_detail->EOF){ ?>
                    <blockquote>
                        <p class="rating">
                            <?php for($i=1;$i<=5;$i++){ ?>
								<?php if($i<=$reviews_detail->fields['reviews_rating']){ ?>
									<span class="yellow"><i class="icon-star"></i></span>
								<?php }else{ ?>
									<i class="icon-star"></i>	
								<?php } ?>
							<?php } ?>
				        </p>
                        <p><?php echo zen_trunc_string(zen_clean_html(stripslashes($reviews_detail->fields['reviews_text']))); ?></p>
                        <small><?php echo $reviews_detail->fields['customers_name']; ?></small>
                    </blockquote>
                <?php   $reviews_detail->MoveNext();
                }	
		    }?>
        </div>
        <div id="productReviewLink"><a class="button pull-left" href="<?php echo zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()); ?>"><?php echo BUTTON_REVIEWS_ALT; ?></a><?php echo '<a class="button pull-right" href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . BUTTON_WRITE_REVIEW . '</a>'; ?></div>

    </div>    
</div>
</div>

<!--bof Prev/Next bottom position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
 * display the product previous/next helper
 */
 require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next bottom position -->

<!--bof also purchased products module-->
<?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?>
<!--eof also purchased products module-->

<!--bof Form close-->
</form>
<!--bof Form close-->
</div>

Hello again
This isn't related but I hope you are going to change your footer color. It hurts my eyes when I try to read it. Just a thought.

L

I don't know if you are hooked on your template but there are some nice free ones on here. This one has demo w multiple pictures.

http://www.zenlyzen.com/responsive-zen-cart-templates/index.php?main_page=product_info&cPath=1_4&products_id=1

Yes I totally understand, it's not the first time I've heard that. I also heard my mega menu colors are not great... I have had trouble finding out which code to change to alter the text color on the footer. It's like I have to change five different codes just to get ever single individual color to change. I would like to change the "old world archery" in the copyright to a something other than black as well, but I can't find the code.

But then they stack in rows of two, where I would like them to be all in one row
If you have a max of four see this setting

admin > config > images > Product Info - Number of Additional Images per Row > set to four

kobra:

If you have a max of four see this setting

admin > config > images > Product Info - Number of Additional Images per Row > set to four

I checked my settings. I had the default 3, switched it to 4, and still the same result.

Switch to the classic template and if there are four you have narrowed this issue to one in your template

kobra:

Switch to the classic template and if there are four you have narrowed this issue to one in your template

What are you thinking it is? I am thinking it is the wrapper that is creating the the 4 images stacking. I am still at a loss for how to fix the images from loading in the featured/new/special products carousels. Also, anybody got any ideas how to adjust the info in the product_info_display.php file to get the images to not stack in twos like they are doing?

toomanyknots:

after I purchased this template I went to the website the template was sold on and viewed the demo, and sure enough the demo had the same problem. I think it might be the "image carousel" thing, I have the same problem on my home page with the featured products slider. I'd like to replace both the additional image slider and the featured products slider, but I'm not sure how at this point...

As you purchased the template Have you asked the template developer? most of them offer support on their templates, especially purchased ones there should be a support link in the purchase email or site page

nigelt74:

As you purchased the template Have you asked the template developer? most of them offer support on their templates, especially purchased ones there should be a support link in the purchase email or site page

Apparently the developer is not selling this template anymore, and I have no way of contacting them. When I did, support wasn't very good to say the least.