Trying to add Ultimate Fade In Slideshow javascript to my site

**plymgary1** · 29 Apr 2010, 02:47 PM

Hi,

I am trying to add a bit of code to this page that will put a slideshow onto the page. I have been told to put it inside the <head> section of the page but I am unable to find this.

Any ideas where I can put it? If I place the code directly into the html of the page it becomes corrupted. (instead of " it displays something like quot$)

If you're interested, this is the code I am using:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [160, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.handcrafteduk.com/images/african/africa1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsafricandrums-c-4_24_76.html", "", ""],
		["http://www.handcrafteduk.com/images/african/africa2.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsafricandrums-c-4_24_76.html", " ", "African Drum"],
		["http://www.handcrafteduk.com/images/african/africa3.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsafricandrums-c-4_24_76.html", "",""],

	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})


var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [160, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.handcrafteduk.com/images/indian/indian1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindiandrums-c-4_24_77.html", "", ""],
		["http://www.handcrafteduk.com/images/indian/indian2.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindiandrums-c-4_24_77.html", " ", "African Drum"],
		["http://www.handcrafteduk.com/images/indian/indian1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindiandrums-c-4_24_77.html", "",""],

	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
	dimensions: [160, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.handcrafteduk.com/images/indonesian/bali1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindonesiandrums-c-4_24_78.html", "", ""],
		["http://www.handcrafteduk.com/images/indonesian/bali2.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindonesiandrums-c-4_24_78.html", " ", "African Drum"],
		["http://www.handcrafteduk.com/images/indonesian/bali3.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindonesiandrums-c-4_24_78.html", "",""],

	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})


</script>

Many thanks,

Gary

**llynix** · 29 Apr 2010, 02:57 PM

Umm.. there is no <head> section in a category. There is a <head> section on every webpage though.

For zen cart.. it's controlled by:
/includes/templates/YOURTEMPLATE/common/html_header.php

You can toss your code in there at the bottom before the </head> tag.

Anthony

**plymgary1** · 29 Apr 2010, 04:11 PM

Thanks Anthony. I added the code into there but it didn't seem to work.

Does anybody have any more advice please?

This is what I have in includes/templates/mytemplate/common/html_header.php

Code:

<?php
/**
 * Common Template
 *
 * outputs the html header. i,e, everything that comes before the \</head\> tag <br />
 * 
 * @package templateSystem
 * @copyright Copyright 2003-2006h 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: html_header.php 4368 2006-09-03 19:31:00Z drbyte $
 */
/**
 * load the module for generating page meta-tags
 */
require(DIR_WS_MODULES . zen_get_module_directory('meta_tags.php'));
/**
 * output main page HEAD tag and related headers/meta-tags, etc
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>
<head>

<title><?php echo META_TAG_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<meta name="keywords" content="<?php echo META_TAG_KEYWORDS;?>" />
<meta name="description" content="<?php echo META_TAG_DESCRIPTION;?>" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Gary Mullen; HandcraftedUK" />
<meta name="generator" content="Unique gifts from around the world.  Buy an ethnic gift." />
<?php if (defined('ROBOTS_PAGES_TO_SKIP') && in_array($current_page_base,explode(",",constant('ROBOTS_PAGES_TO_SKIP'))) || $current_page_base=='down_for_maintenance') { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<?php if (defined('FAVICON')) { ?>
<link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />

<?php } //endif FAVICON ?>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_CATALOG : HTTP_SERVER . DIR_WS_CATALOG ); ?>" />
<?php echo rss_feed_link_alternate(); // RSS Feed ?>
<?php

/**
 * load all template-specific stylesheets, named like "style*.css", alphabetically
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^style/', '.css');
  while(list ($key, $value) = each($directory_array)) {
    echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
  }
/**
 * load stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by Juxi Zoza.
 */
  $manufacturers_id = (isset($_GET['manufacturers_id'])) ? $_GET['manufacturers_id'] : '';
  $tmp_products_id = (isset($_GET['products_id'])) ? (int)$_GET['products_id'] : '';
  $tmp_pagename = ($this_is_home_page) ? 'index_home' : $current_page_base;
  $sheets_array = array('/' . $_SESSION['language'] . '_stylesheet', 
                        '/' . $tmp_pagename, 
                        '/' . $_SESSION['language'] . '_' . $tmp_pagename, 
                        '/c_' . $cPath,
                        '/' . $_SESSION['language'] . '_c_' . $cPath,
                        '/m_' . $manufacturers_id,
                        '/' . $_SESSION['language'] . '_m_' . (int)$manufacturers_id, 
                        '/p_' . $tmp_products_id,
                        '/' . $_SESSION['language'] . '_p_' . $tmp_products_id
                        );
  while(list ($key, $value) = each($sheets_array)) {
    //echo "<!--looking for: $value-->\n";
    $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '.css';
    if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
  }

/**
 * load printer-friendly stylesheets -- named like "print*.css", alphabetically
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
  sort($directory_array);
  while(list ($key, $value) = each($directory_array)) {
    echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
  }

/**
 * load all site-wide jscript_*.js files from includes/templates/YOURTEMPLATE/jscript, alphabetically
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript'), '/^jscript_/', '.js');
  while(list ($key, $value) = each($directory_array)) {
    echo '<script type="text/javascript" src="' .  $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/' . $value . '"></script>'."\n";
  }

/**
 * load all page-specific jscript_*.js files from includes/modules/pages/PAGENAME, alphabetically
 */
  $directory_array = $template->get_template_part($page_directory, '/^jscript_/', '.js');
  while(list ($key, $value) = each($directory_array)) {
    echo '<script type="text/javascript" src="' . $page_directory . '/' . $value . '"></script>' . "\n";
  }

/**
 * load all site-wide jscript_*.php files from includes/templates/YOURTEMPLATE/jscript, alphabetically
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.php',DIR_WS_TEMPLATE, $current_page_base,'jscript'), '/^jscript_/', '.php');
  while(list ($key, $value) = each($directory_array)) {
/**
 * include content from all site-wide jscript_*.php files from includes/templates/YOURTEMPLATE/jscript, alphabetically.
 * These .PHP files can be manipulated by PHP when they're called, and are copied in-full to the browser page
 */
    require($template->get_template_dir('.php',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/' . $value); echo "\n";
  }
/**
 * include content from all page-specific jscript_*.php files from includes/modules/pages/PAGENAME, alphabetically.
 */
  $directory_array = $template->get_template_part($page_directory, '/^jscript_/');
  while(list ($key, $value) = each($directory_array)) {
/**
 * include content from all page-specific jscript_*.php files from includes/modules/pages/PAGENAME, alphabetically.
 * These .PHP files can be manipulated by PHP when they're called, and are copied in-full to the browser page
 */
    require($page_directory . '/' . $value); echo "\n";
  }

//DEBUG: echo '<!-- I SEE cat: ' . $current_category_id . ' || vs cpath: ' . $cPath . ' || page: ' . $current_page . ' || template: ' . $current_template . ' || main = ' . ($this_is_home_page ? 'YES' : 'NO') . ' -->';
?>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [160, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.handcrafteduk.com/images/african/africa1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsafricandrums-c-4_24_76.html", "", ""],
		["http://www.handcrafteduk.com/images/african/africa2.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsafricandrums-c-4_24_76.html", "", "African Drum"],
		["http://www.handcrafteduk.com/images/african/africa3.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsafricandrums-c-4_24_76.html", "", ""] //
],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})


var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [160, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.handcrafteduk.com/images/indian/indian1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindiandrums-c-4_24_77.html", "", ""],
		["http://www.handcrafteduk.com/images/indian/indian2.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindiandrums-c-4_24_77.html", " ", "African Drum"],
		["http://www.handcrafteduk.com/images/indian/indian1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindiandrums-c-4_24_77.html", "",""] //
],

	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
	dimensions: [160, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.handcrafteduk.com/images/indonesian/bali1.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindonesiandrums-c-4_24_78.html", "", ""],
		["http://www.handcrafteduk.com/images/indonesian/bali2.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindonesiandrums-c-4_24_78.html", " ", "African Drum"],
		["http://www.handcrafteduk.com/images/indonesian/bali3.jpg", "http://www.handcrafteduk.com/bongoanddjembedrumsindonesiandrums-c-4_24_78.html", "",""] //
],

	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})


</script>





</head>
<?php // NOTE: Blank line following is intended: ?>

And, I have added this into the html of this page:

Code:

<div id="fadeshow1"></div>

But it doesn't seem to be working??

Please help if you can?

Cheers,

Gary

**TinaS** · 29 Apr 2010, 04:20 PM

Isn't there supposed to be something in that <div> all you have done with that code is prepare the slide show to appear and created an empty div??

**plymgary1** · 29 Apr 2010, 04:32 PM

Originally Posted by TinaS

Isn't there supposed to be something in that <div> all you have done with that code is prepare the slide show to appear and created an empty div??

Thanks. Sorry if I have misunderstood but I thought that the final code would look up 'fadeshow1' from the code pasted into the header and display it on the page??

**llynix** · 29 Apr 2010, 04:35 PM

**plymgary1** · 29 Apr 2010, 04:39 PM

Originally Posted by llynix

YES! Thank you very much...that solved it.

Thread: Trying to add Ultimate Fade In Slideshow javascript to my site

Thread Tools

Search Thread

Display

Trying to add Ultimate Fade In Slideshow javascript to my site

Re: Where is the <head> section in a category?

Re: Where is the <head> section in a category?

Re: Where is the <head> section in a category?

Re: Where is the <head> section in a category?

Re: Where is the <head> section in a category?

Re: Where is the <head> section in a category?

Similar Threads

Ultimate Fade-In Slideshow

Ultimate Fade In Slideshow Problem

Trouble with Ultimate Fade In Slideshow

How can I use Ultimate Fade-in slideshow v2.1 ?

Ultimate Fade-in slideshow in ezpage

Posting Permissions