Images keeping loading vertically...

[toomanyknots]

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/taked...ded-p-417.html

[kobra]

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

[toomanyknots]

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

[toomanyknots]

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

[lruskauff]

See if this helps

http://stackoverflow.com/questions/1...the-page-loads

Similar problem

[toomanyknots]

See if this helps

http://stackoverflow.com/questions/1...the-page-loads

Similar problem

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

[toomanyknots]

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 http://www.zen-cart.com/license/2_0.txt 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
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * 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;}  
}

[nigelt74]

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

[toomanyknots]

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.

[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