Javascript slideshow help

[bpoilspill]

I'm having some trouble implementing a javascript slideshow. I've got it working on another website but can't with ZC. It's loading the javascript files and I have the code placed in my template/common/tpl_header.php. It loads the CSS portion as well, but seems it's missing the .js files. An example of it can be found here www.thatcompguy.net the site I'm trying to get it working on is www.ponyrparts.com

[bpoilspill]

Here's my tpl_header.php

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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_header.php 3392 2006-04-08 15:17:37Z birdbrain $
 */
?>

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">

<!--bof-branding display-->
<div id="logoWrapper">
    
	<!--Start slideshow-->
	<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {
					timed: true,
					showInfopane: true,
					textShowCarousel: '',
					delay: 9000
				});
			}
			window.addEvent('domready',startGallery);
		</script>
		
			<div id="myGallery">
				<div class="imageElement">
					<h3>1</h3>
					<p></p>
					<a href="#" title="open image" class="open"></a>
					<img src="../images/PonyR_Logo.pn" alt="something1" class="full" />
					<img src="images/brugges2006/1-mini.jpg" alt="something1" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>2</h3>
					<p></p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/2.jpg" alt="something1" class="full" />
					<img src="images/brugges2006/2-mini.jpg" alt="something1" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>3</h3>
					<p></p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/3.jpg" alt="something1" class="full" />
					<img src="images/brugges2006/3-mini.jpg" alt="something1" class="thumbnail" />
				</div>
			</div>
		<!--End slideshow-->
	
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
</div>
<!--eof-branding display-->

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">	
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>    <li><a href="http://www.ponyrparts.com/forum">Forum</a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->

<?php /*require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); */?>

<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>

[bpoilspill]

Here is the slideshow

http://smoothgallery.jondesign.net

[gjh42]

Your page source looked good, with the js files automatically being called correctly in the <head>. I haven't had anything to do with mootools, but I do know that jquery needs to have jscript_jquerywhatever.js called before js files that use it. You have

<script type="text/javascript" src="includes/templates/ponyr_dark/jscript/jscript_jd.gallery.js"></script>
<script type="text/javascript" src="includes/templates/ponyr_dark/jscript/jscript_jd.gallery.transitions.js"></script>
<script type="text/javascript" src="includes/templates/ponyr_dark/jscript/jscript_mootools-1.2-more.js"></script>
<script type="text/javascript" src="includes/templates/ponyr_dark/jscript/jscript_mootools-1.2.1-core-yc.js"></script>
</head>

Renaming the jscript_mootools-* files like jscript_1_mootools-* will load them first.

[bpoilspill]

Renamed them, no luck.

[gjh42]

They are loading first now... sorry, that's all the help I can offer. Someone who is good with js will have to chime in.

[bpoilspill]

They are loading first now... sorry, that's all the help I can offer. Someone who is good with js will have to chime in.

Thanks. Found an old thread with the same problem. http://www.zen-cart.com/showthread.p...lery-Slideshow

[bpoilspill]

Ok something just happened. I added a picture and now it's stuck on "loading". I wonder if renaming the .js files has to do with anything.

[bpoilspill]

I think I figured it out, the Mootools files need to be ordered correctly. Thanks for that tip.

[gjh42]

So the ...mootools-1.2.1-core-yc.js needs to load before the ...mootools-1.2-more.js?
Makes sense.