EIGHTEEN cool mods for ISC

[Snooper]

This mod will change the fonts used as headers on ISC to a set that will be in keeping with your site.. The current option being the systems just do not work for me, so I used the following mod..

I started with a trip to here -- http://www.1001freefonts.com/ and selected the font I wanted to use.
I then took the font to cufon located here -- http://cufon.shoqolate.com/generate/
From here I converted the font from system useable to a portable format, and saved this along side a .JS given by Cufon in the ISC folder /javascript

I then located what I think is the core script of the ISC -- _master/panels/HTMLHead.html.
Made a script mod (shown in blue)

//-- placing the script under this line -- //
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js?%%GLOBAL_JSCacheToken%%"></script>

Code: Select all

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/cufon-yui.js"></script>
        <script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/yourfontconverted.js"></script>
        <script type="text/javascript">
			Cufon.replace('h2');       
       </script>]

Now in theory, what should happen is all site references to text between <h2> xxx </h2> would display the font of choice. The problem however, is a small delay IE creates as the page reloads the changes on subsequent pages after the front. So we need to deal with this..

Locate the Footer.html script -- template/your site theme/panels

At the base of this script you add -- <script type="text/javascript"> Cufon.now(); </script>

This places the line inside a </DIV> when used which is not a problem. But importantly it is above the </body> tag.. Now every page change the font change/ delay is virtually invisible..

This example asumes h2 text being altered. You can extend this to include h1, h3 etc.

Code: Select all

<script type="text/javascript">
			Cufon.replace('h1');  
			Cufon.replace('h2');       
         Cufon.replace('h3');       
</script>

And then adding size and colour control via your sites CSS -

Code: Select all

h1 {
     font-size: 30px;
        color: #d92850;
}


h2 { 
     font-size: 20px;
        color: #d92850;
}

h3 {
    font-size: 20px;
	color: #d92850;
}

Below shows by example this mod in action, but you may have to make a few tweeks in the style sheet or around the Cufon code (refer site for guide) to resolve font sizes and colour once changed through this method.. Otherwise enjoy !!

[Snooper]

I needed a bar code for items I am sending customers and this needed to be based on a unique reference. My insisted requirement was it had to be readable by as damn it all scanners on the market. I need to have this code printed on all documents and packages that link the item to customer as part of a realistic audit trail… (They look good along side customes delivery addresss's too *lol*)

Somebody might find this useful, so here is the code = Copy past into notepad and save as barcode.php –

Code: Select all

<?php
/*==================================================================*/
if(isset($_GET["text"])) $text=$_GET["text"];
if(isset($_GET["format"])) $format=$_GET["format"];
if(isset($_GET["quality"])) $quality=$_GET["quality"];
if(isset($_GET["width"])) $width=$_GET["width"];
if(isset($_GET["height"])) $height=$_GET["height"];
if(isset($_GET["type"])) $type=$_GET["type"];
if(isset($_GET["barcode"])) $barcode=$_GET["barcode"];

if (!isset ($text)) $text = 1;
if (!isset ($type)) $type = 1;
if (empty ($quality)) $quality = 100;
if (empty ($width)) $width = 160;
if (empty ($height)) $height = 80;
if (!empty ($format)) $format = strtoupper ($format);
        else $format="PNG";

switch ($type)
{
        default:
                $type = 1;
        case 1:
                Barcode39 ($barcode, $width, $height, $quality, $format, $text);
                break;          
}

//-----------------------------------------------------------------------------
// Generate a Code 3 of 9 barcode
//-----------------------------------------------------------------------------
function Barcode39 ($barcode, $width, $height, $quality, $format, $text)
{
        switch ($format)
        {
                default:
                        $format = "JPEG";
                case "JPEG": 
                        header ("Content-type: image/jpeg");
                        break;
                case "PNG":
                        header ("Content-type: image/png");
                        break;
                case "GIF":
                        header ("Content-type: image/gif");
                        break;
        }

        $im = ImageCreate ($width, $height)
    or die ("Cannot Initialize new GD image stream");
        $White = ImageColorAllocate ($im, 255, 255, 255);
        $Black = ImageColorAllocate ($im, 0, 0, 0);
        //ImageColorTransparent ($im, $White);
        ImageInterLace ($im, 1);

        $NarrowRatio = 20;
        $WideRatio = 55;
        $QuietRatio = 35;

        $nChars = (strlen($barcode)+2) * ((6 * $NarrowRatio) + (3 * $WideRatio) + ($QuietRatio));
        $Pixels = $width / $nChars;
        $NarrowBar = (int)(20 * $Pixels);
        $WideBar = (int)(55 * $Pixels);
        $QuietBar = (int)(35 * $Pixels);

        $ActualWidth = (($NarrowBar * 6) + ($WideBar*3) + $QuietBar) * (strlen ($barcode)+2);
        
        if (($NarrowBar == 0) || ($NarrowBar == $WideBar) || ($NarrowBar == $QuietBar) || ($WideBar == 0) || ($WideBar == $QuietBar) || ($QuietBar == 0))
        {
                ImageString ($im, 1, 0, 0, "Image is too small!", $Black);
                OutputImage ($im, $format, $quality);
                exit;
        }
        
        $CurrentBarX = (int)(($width - $ActualWidth) / 2);
        $Color = $White;
        $BarcodeFull = "*".strtoupper ($barcode)."*";
        settype ($BarcodeFull, "string");
        
        $FontNum = 3;
        $FontHeight = ImageFontHeight ($FontNum);
        $FontWidth = ImageFontWidth ($FontNum);
        if ($text != 0)
        {
                $CenterLoc = (int)(($width-1) / 2) - (int)(($FontWidth * strlen($BarcodeFull)) / 2);
                ImageString ($im, $FontNum, $CenterLoc, $height-$FontHeight, "$BarcodeFull", $Black);
        }
		else
		{
			$FontHeight=-2;
		}

        for ($i=0; $i<strlen($BarcodeFull); $i++)
        {
                $StripeCode = Code39 ($BarcodeFull[$i]);

                for ($n=0; $n < 9; $n++)
                {
                        if ($Color == $White) $Color = $Black;
                        else $Color = $White;

                        switch ($StripeCode[$n])
                        {
                                case '0':
                                        ImageFilledRectangle ($im, $CurrentBarX, 0, $CurrentBarX+$NarrowBar, $height-1-$FontHeight-2, $Color);
                                        $CurrentBarX += $NarrowBar;
                                        break;


                                case '1':
                                        ImageFilledRectangle ($im, $CurrentBarX, 0, $CurrentBarX+$WideBar, $height-1-$FontHeight-2, $Color);
                                        $CurrentBarX += $WideBar;
                                        break;
                        }
                }

                $Color = $White;
                ImageFilledRectangle ($im, $CurrentBarX, 0, $CurrentBarX+$QuietBar, $height-1-$FontHeight-2, $Color);
                $CurrentBarX += $QuietBar;
        }

        OutputImage ($im, $format, $quality);
}

//-----------------------------------------------------------------------------
// Output an image 
//-----------------------------------------------------------------------------
function OutputImage ($im, $format, $quality)
{
        switch ($format)
        {
                case "JPEG": 
                        ImageJPEG ($im, "", $quality);
                        break;
                case "PNG":
                        ImagePNG ($im);
                        break;
                case "GIF":
                        ImageGIF ($im);
                        break;
        }
}

//-----------------------------------------------------------------------------
// Returns the Code 3 of 9 value for a given ASCII character
//-----------------------------------------------------------------------------
function Code39 ($Asc)
{
        switch ($Asc)
        {
                case ' ':
                        return "011000100";     
                case '$':
                        return "010101000";             
                case '%':
                        return "000101010"; 
                case '*':
                        return "010010100"; // * Start/Stop
                case '+':
                        return "010001010"; 
                case '|':
                        return "010000101"; 
                case '.':
                        return "110000100"; 
                case '/':
                        return "010100010"; 
				case '-':
				return "010000101";
                case '0':
                        return "000110100"; 
                case '1':
                        return "100100001"; 
                case '2':
                        return "001100001"; 
                case '3':
                        return "101100000"; 
                case '4':
                        return "000110001"; 
                case '5':
                        return "100110000"; 
                case '6':
                        return "001110000"; 
                case '7':
                        return "000100101"; 
                case '8':
                        return "100100100"; 
                case '9':
                        return "001100100"; 
                case 'A':
                        return "100001001"; 
                case 'B':
                        return "001001001"; 
                case 'C':
                        return "101001000";
                case 'D':
                        return "000011001";
                case 'E':
                        return "100011000";
                case 'F':
                        return "001011000";
                case 'G':
                        return "000001101";
                case 'H':
                        return "100001100";
                case 'I':
                        return "001001100";
                case 'J':
                        return "000011100";
                case 'K':
                        return "100000011";
                case 'L':
                        return "001000011";
                case 'M':
                        return "101000010";
                case 'N':
                        return "000010011";
                case 'O':
                        return "100010010";
                case 'P':
                        return "001010010";
                case 'Q':
                        return "000000111";
                case 'R':
                        return "100000110";
                case 'S':
                        return "001000110";
                case 'T':
                        return "000010110";
                case 'U':
                        return "110000001";
                case 'V':
                        return "011000001";
                case 'W':
                        return "111000000";
                case 'X':
                        return "010010001";
                case 'Y':
                        return "110010000";
                case 'Z':
                        return "011010000";
                default:
                        return "011000100"; 
        }
}

?>

Okay, so what are you looking at --

$barcode = [required] The barcode you want to generate

$type = (default=0) It's 0 for Code 3 of 9 (the only one supported)

$width = (default=160) Width of image in pixels. The image MUST be wide enough to handle the length of the given value. The default
value will probably be able to display about 6 digits. If you get an error message, make it wider!

$height = (default=80) Height of image in pixels

$format = (default=jpeg) Can be "jpeg", "png", or "gif"

$quality = (default=100) For JPEG only: ranges from 0-100

$text = (default=1) 0 to disable text below barcode, >=1 to enable

Now to use the barcode itself -

If you actually intend to print the barcodes and scan them with a scanner, I highly recommend choosing JPEG with a quality of 100. Most browsers can't seem to print a PNG without mangling it beyond recognition. Which by todays standard, is pants !!

This is how the basic barcode is used as a command line..

<IMG SRC="barcode.php?barcode=1166A&quality=75"> <= Default size, but quality setting

<IMG SRC="barcode.php?barcode=1166A-TAN&width=320&height=90"> <= You can alter the size of the bar code

Embedding this you now need to identify the ISC variable that will be the ‘input’ for the command line. In my example I have hard wired the input as 1166A. But the methord of parsing a value is simeple enough -

<?php

$BarCodeInput = "1166A";
If using only numbers as input use <?php $BarCodeInput = '11668';
$BarCodeInput = “1166A-TAN”; <= If input uses letters and numbers

?>

Now modtfy the barcode command line to read –

<IMG SRC="barcode.php?barcode=<?php echo $BarCodeInput;?>&quality=100">



Having established the barcode script and ‘sort of’ explained how it works. Let’s now use it within ISC.

In this example, we shall append the top right, but empty space of the packing_slip_print.html script. Or if you wish, the invoice_email.html (?)

Firstly, if we take from within the html some of the GLOBAL variables used here. In my example, the Order ID and Order Date are being used. This is (for us) a quick, clean to look at, search reference.

So locate the line %%GLOBAL_HeaderLogo%% and place our line above -

<td width="272">
<IMG SRC="%%GLOBAL_ShopPath%%/barcode/barcode.php?barcode=%%GLOBAL_OrderId%%-%%GLOBAL_OrderDate%%&width=350&height=90"><br/>
</tr>
</table>
%%GLOBAL_HeaderLogo%%

Now to view the result of this mod/addin - Admin > Orders > View Orders > Action (see drop down right side of customers order)

[Snooper]

Need a way of telling customers when that big event will take place!?? A novel way is clearly by using a count down of some sort.. Here is a version I think you might like to try. A reduced image of this example working is shown below. It is not real time and will only show current and correct information on each page reload. This reduces server weight as your shop and its images download.... Enjoy !1..

Code: Select all

<?php
include('countdown.php');
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
<!--
.box {
	border: 2px solid #e12d54;
	background-color: #ffd7e2;
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	color: #000000;
}

-->
</style>
</head>
<body>
<div class="box" style="width:500px;">
  <table border="0" cellpadding="30" width="100%">
    <tr><td>
  <?php
echo printcountdown(countdown(11,25,YEAR,6,33), 0, 'My Birthday!').'<br /><br />';
echo printcountdown(countdown(11,28), 1, 'Kyle\'s Birthday').'<br /><br />';
echo printcountdown(countdown(12,25), 0, 'Christmas').'<br />';
  ?>
    </td></tr>
</table>
</div>
</body>
</html>

The next section of code is complete, you should NOT need to alter this, but the instruction to use are included...

Code: Select all

<?php

$version = '1.0';

define("YEAR", date('Y'));
function countdown($month, $day, $year=YEAR, $hour=0, $minute=0, $second=0) {
///////////////////////////////////////////
// usage:
// countdown(int month, int day [, int year [, int hour [, int minute [, int second]]]])
// year is optional and defaults to the current year
// hour, minute, and second are optional and default to 0
/////
// Returns:
// array(
// 		int years
// 		int months
// 		int days
// 		int hours
// 		int minutes
// 		int seconds
// 		str now
// 		str then
//		int passed
//		)
///////////////////////////////////////////
	$now = time();
	$then = mktime($hour,$minute,$second,$month,$day,$year);
	if ($now>=$then) {
		$till=0;
		$years=0;
		$months=0;
		$days=0;
		$hours=0;
		$minutes=0;
		$seconds=0;
		$passed=1;
	} else {
		$till = $then-$now; // seconds until $then
		$years = floor($till/31556926); // 31556926 seconds in a year
		$months = floor(($till%31556926)/2629744); // remainder of years into months - 2629744 seconds in month
		$days = floor((($till%31556926)%2629744)/86400); // remainder of months into days - 86400 seconds in a day
		$hours = floor(((($till%31556926)%2629744)%86400)/3600); // remainder of days into hours - 3600 seconds in an hour
		$minutes = floor((((($till%31556926)%2629744)%86400)%3600)/60); // remainder of hours into minutes - 60 seconds in a minute
		$seconds = floor((((($till%31556926)%2629744)%86400)%3600)%60); // remainder of minutes, already in seconds so no need to divide
		$passed=0;
	}
	$fnow = date("H:i:s n/j/y", $now); // now in format: hour:minute:second month/day/year
	$fthen = date("H:i:s n/j/y", $then); // then in same format
	
	$return = array(
					'years'=>$years,
					'months'=>$months,
					'days'=>$days,
					'hours'=>$hours,
					'minutes'=>$minutes,
					'seconds'=>$seconds,
					'now'=>$fnow,
					'then'=>$fthen,
					'passed'=>$passed
					);
	return $return;
}

function printcountdown($return, $mode=0, $name=0) {
////////////
// Modes to show count are 0, 1 and 2 :
// 0 (default): Time until My Birthday! - 06:33:00 11/25/05: 6 hours, 28 minutes, and 36 seconds.
// 1: My Birthday! - 06:33:00 11/25/05: 6 hours, 28 minutes, and 36 seconds.
// 2: 6 hours, 28 minutes, and 36 seconds.

	$togo = '';
	if ($mode==0) $togo .= 'Time until ';
	if (($mode!=2)&&($mode!=3)) {
	$togo .= '<strong>';
	if ($name !== 0) $togo .= $name.' - ';
	if (substr($return['then'], 0, 9)=='00:00:00 ') {
		$togo .= substr($return['then'], 9);
	} else {
		$togo .= $return['then'];
	}
	$togo .= '</strong>: ';
	}
	
	if ($return['years'] > 0) {
		$togo .= $return['years'].' year';
		if ($return['years'] > 1) $togo .= 's';
		if ($return['months'] > 0) {
			$togo .= ', ';
		}
	}
	
	if ($return['months'] > 0) {
		$togo .= $return['months'].' month';
		if ($return['months'] > 1) $togo .= 's';
		if ($return['days'] > 0) {
			$togo .= ', ';
		}
	}
	
	if ($return['days'] > 0) {
		$togo .= $return['days'].' day';
		if ($return['days'] > 1) $togo .= 's';
		if ($return['hours'] > 0) {
			$togo .= ', ';
		}
	}
	
	if ($return['hours'] > 0) {
		$togo .= $return['hours'].' hour';
		if ($return['hours'] > 1) $togo .= 's';
		if ($return['minutes'] > 0) {
			$togo .= ', ';
		}
	}
	
	if ($return['minutes'] > 0) {
		$togo .= $return['minutes'].' minute';
		if ($return['minutes'] > 1) $togo .= 's';
		if ($return['seconds'] > 0) {
			$togo .= ', ';
		}
	}
	
	if ($return['seconds'] > 0) {
		$togo .= $return['seconds'].' second';
		if ($return['seconds'] > 1) $togo .= 's';
	}
	
	$expld = explode(', ', $togo);
	# EXAMPLE:
	# 0 => 5 years
	# 1 => 5 months
	# 2 => 5 days
	# 3 => 5 hours
	# 4 => 5 minutes
	# 5 => 5 seconds
	$exlast = count($expld)-1;
	$todo = '';
	foreach ($expld as $num => $value) {
		$todo .= $value;
		if (($num!=$exlast) && (count($expld)!=2)) $todo .= ', ';
		if ((count($expld)==2) && ($num!=$exlast)) $todo .= ' ';
		if ($num==($exlast-1)) $todo .= 'and ';
		if (($num==$exlast) && ($mode!=3) && ($return['passed']!=1)) $todo .= '.';
	}
	if ($return['passed']==1) $todo .= 'It\'s passed!';
	return $todo;
}
?>

[Tony Barnes]

Cur font implementation is pretty handy - this is one area where the web really needs to sort itself out, font files can be tiny, attaching them to a site should be no more a consideration than adding an image

[Gareth]

Hey snooper, you've got some good mods there. Might give the font one a try, cheers

[Snooper]

Your welcome peeps !

[Snooper]

Love them or hate them, we all never the less need them.. Customers !

Not everybody will use this mod, but I do find that by ‘suggesting’ a site is active with users does seem to attract attention (As verified by independant trackers) This is a live who‘s online counter (One of many around I'm sure).. Put simply, it shows anybody who care to notice that somebody is onsite and looking around. You can have two minds on this one.. The url is live as I have set this up. Yes, it is early days, but that count will grow as the div code is transported to other sites. The code is here anyway --

1) Place the div code as given below via css style ruling onto the front or inside of your web site and pool your site uses with others so collectively creating a higher onsite count than in reality …

Code: Select all

<DIV ID="online">
      <IFRAME frameborder="0" scrolling="no" width="100" height="15" SRC="http://www.ihost4u.co.uk/online/count.cgi"> </IFRAME> 
</DIV>

OR if you want to use for yourself and not pool user numbers....

Code: Select all

<DIV ID="online">
      <IFRAME frameborder="0" scrolling="no" width="100" height="15" SRC="http://www.yourweburl/yourfolder/count.cgi"> </IFRAME> 
</DIV>

2) Then use the cgi script below naming the file count.cgi and place this in a folder of its own (I used /online) and CHMOD to 755. Then make the folder itself CHMOD 777.

When run, the cgi code should generate a text file - ips.txt. This is the method used to seperate who from who online at any given time and is based on users (irrespective of where from), time arriving and IP address. It is a temp event however, since this information it is removed the moment a user leaves. I have kept this simple so it pulls little in the way of server resources when used.

Code: Select all

#!/usr/bin/perl

###########################################
#ONLY EDIT THIS PART OF THE SCRIPT!!!!
  
$bgcolor = "#FFFFFF";	  #bacground color of frame
$size = "1";		  #font size of online user text
$face = "Verdana";	  #font face of online user text
$color = "#000080";	  #font color of online user text 
$tol=60;		  #refresh time(second). change if you want

# DO NOT EDIT BELOW THIS LINE!!!!
##########################################

print "Content-type: text/html\n\n";
$url = $ENV{'SCRIPT_NAME'};			# script's url
$ip = $ENV{'REMOTE_ADDR'};			# visitors ip number
$now=time;
$data = "ips.txt";

open (FILE,$data);
#flock(FILE,2);						#if you have got dense visitors you lock file
@text = <FILE>;
#flock(FILE,8);						# unlock
close (FILE);
foreach $line (@text){
	chop($line);					# erase \n (new line) end of line
	($ftime,$fip)=split(/=/,$line);	#seperate of =
	if ($ip ne $fip){				# if visitor's ip is not equal in file ip 
						# if recorded ip in the file unimportant
						# because will be new record 
		$diff = time-$ftime;		# now time is different file time
		if (($diff<$tol)&&($diff>0)){	# if difference small refresh and big of 0
			push @newtext, $line;	# take this line and erase other line
		}
	}
}

$newline="$now=$ip";				# online time and IP 
push @newtext,$newline;
$azs=scalar(@newtext);				#online user number
open (FILE,">$data");
#flock(FILE,2);
foreach $line (@newtext){print FILE "$line\n";}
#flock(FILE,8);
close (FILE);

$text ="visitor"; 
$text .="s" if ($azs>1);

# ---- Creating HTML page ----------
print <HtmlEND;
<html><head>
<meta http-equiv="REFRESH" content="$tol; URL=$url"></head>
<body bgcolor="$bgcolor" topmargin="2" leftmargin="2">
<center><font size="$size" face="$face" color="$color"><b>$azs</b> $text online
</font></center></body></html>
HtmlEND
;[/#!/usr/local/bin/perl

###########################################
#ONLY EDIT THIS PART OF THE SCRIPT!!!!

$bgcolor = "#FFFFFF";	        #bacground color of frame
$size = "1";			#font size of online user text
$face = "Verdana";		#font face of online user text
$color = "#000080";		#font color of online user text 
$tol=60;			#refresh time(second). change if you want

# DO NOT EDIT BELOW THIS LINE!!!!
##########################################

print "Content-type: text/html\n\n";
$url = $ENV{'SCRIPT_NAME'};			# script's url
$ip = $ENV{'REMOTE_ADDR'};			# visitors ip number
$now=time;
$data = "ips.txt";

open (FILE,$data);
#flock(FILE,2);						#if you have got dense visitors you lock file
@text = <FILE>;
#flock(FILE,8);						# unlock
close (FILE);
foreach $line (@text){
	chop($line);					# erase \n (new line) end of line
	($ftime,$fip)=split(/=/,$line);	#seperate of =
	if ($ip ne $fip){				# if visitor's ip is not equal in file ip 
									# if recorded ip in the file unimportant
									# because will be new record 
		$diff = time-$ftime;		# now time is different file time
		if (($diff<$tol)&&($diff>0)){	# if difference small refresh and big of 0
			push @newtext, $line;	# take this line and erase other line
		}
	}
}

$newline="$now=$ip";				# online time and IP 
push @newtext,$newline;
$azs=scalar(@newtext);				#online user number
open (FILE,">$data");
#flock(FILE,2);
foreach $line (@newtext){print FILE "$line\n";}
#flock(FILE,8);
close (FILE);

$text ="visitor"; 
$text .="s" if ($azs>1);

# ---- Creating HTML page ----------
print <<HtmlEND;
<html><head>
<meta http-equiv="REFRESH" content="$tol; URL=$url"></head>
<body bgcolor="$bgcolor" topmargin="2" leftmargin="2">
<center><font size="$size" face="$face" color="$color"><b>$azs</b> $text online
</font></center></body></html>
HtmlEND
;

Now if for example, I have two customers and, depending on the script you used, so do you.. If five site users have two customers we all see 10 customers online !! Good karma ?? Plain lies ?? *shruggs* Two edges of the same sword perhaps....

[Tony Barnes]

Interesting, I'll have to check our stats to see if this would be affirming, I've a feeling our site isn't that busy all the time! lol

[Snooper]

Here is my version of removing the carousel from ISC so that online clothes stores might be able to present garments of same style, but differing colours in a neat logical way, but with out the clumsy look of two unsightly Left Right buttons.

Goto -- templates/yoursite/panels/productdetails.html locate the following section of script –

Code: Select all

<div class="ImageCarouselBox" style="margin:0 auto; %%GLOBAL_HideImageCarousel%%">
<a id="ImageScrollPrev" class="prev" href="#"><img src="%%GLOBAL_IMG_PATH%%/LeftArrow.png" alt="" width="20" height="20" /></a>
<div class="ProductTinyImageList">
<ul>
%%SNIPPET_ProductTinyImages%%
</ul>
</div>
<a id="ImageScrollNext" class="next" href="#"><img src="%%GLOBAL_IMG_PATH%%/RightArrow.png" alt="" width="20" height="20" /></a>
</div>
<div style="%%GLOBAL_HideMorePicturesLink%%" class="SeeMorePicturesLink">
<a href="#" onclick="%%GLOBAL_TinyImageClickJavascript%% return false;" class="ViewLarger">%%GLOBAL_SeeMorePictures%%</a>
</div>

And reduce this to read –

Code: Select all

<div class="ImageCarouselBox" style="margin:0 auto;width:621px;%%GLOBAL_HideImageCarousel%%">
<div class="ProductTinyImageList">
<ul>
%%SNIPPET_ProductTinyImages%%
</ul>
</div>
</div>

This has removed any contact with the carousel script, but leaves the jquery / zoom functions intact.
Now go to yoursite/javasc ript/product.functions.js and locate the line –

var visible = MaxVisibleTinyImages;

These two variables are constructed by events that cross through the script, but put simply, they are collectively providing a value that is based on how many thumbnails you are wanting to show, the size of each, padding and space between images. In this state, the value of the variable ‘visible’ could be 2. So if you want to increase the number of thumbnails in view, add the 2 to the number ‘total’ you wish to use.
In my example I am using 60px x 100px thumb nails and I needed 8 thumb nails visable at some point; So the line mod is -

var visible = MaxVisibleTinyImages + 6;
This internally reads -- var visible as = (2 + 6) = 8;

Now we have altered the rules for how many thumb nails we wish to see on view, we now need to resolve a major script issue that blatantly shows IE is not web standard compliant (W3C). Meaning, if you kept the mod above as is then skipt to the CSS part below, you would be able to use the resultant web page and its embeded stock control, cart functions, zoom etc. in both Opera and FireFox without issue, but not with any version of IE. So you need to address the section of script that IE seems to have issue with.

In product.functions.js find the following –

Code: Select all

if(!$('.ImageCarouselBox').is(':visible')) {
var seeMoreImageHeight = $("#ProductDetails .SeeMorePicturesLink").height();
$("#ProductDetails .ProductThumb").width(ProductThumbWidth+20);
$("#ProductDetails .ProductThumb").height(ProductThumbHeight+seeMoreImageHeight+10);
return false;
}

And then make this 'subtle' mod –

Code: Select all

if(!$('.ImageCarouselBox').is(':visible')) {
// var seeMoreImageHeight = $("#ProductDetails .SeeMorePicturesLink").height();
// $("#ProductDetails .ProductThumb").width(ProductThumbWidth+20);
// $("#ProductDetails .ProductThumb").height(ProductThumbHeight+seeMoreImageHeight+10);
return false;
}

And finally, goto templates/yoursite/styles/style.css and locate this code –

Code: Select all

#ProductDetails .ProductTinyImageList {
	float: left;
	margin-top:10px;
	white-space:nowrap; 
	width: 40px
   overflow: hidden; 
	margin-left:auto;
}

And change this to –

Code: Select all

#ProductDetails .ProductTinyImageList {
	float: left; 
	margin-top:10px;
//**	white-space:nowrap; **/
	width: 40px;
//**    overflow: hidden; **/
//**    margin-left:auto; **/
   text-align: left;; 
}

There is no point of making any further changes to the CSS that deals with the carousel after this point since external processes append CSS changes to the web page as it becomes constructed.

If you are using ISC 5.5.4 and want to change the image rollover/ boundry colours, start with the CSS and then go back to product.functions.js and change this section to your requirements.-

Code: Select all

function highlightProductTinyImage(ThumbIndex) {
	$('.ProductTinyImageList li').css('border', '1px solid gray');
	$('.ProductTinyImageList li .TinyOuterDiv').css('border', '2px solid white');

	$('#TinyImageBox_'+ThumbIndex).css('border', '1px solid #075899');
	$('#TinyImageBox_'+ThumbIndex+' .TinyOuterDiv').css('border', '2px solid #075899');
}

To stop the page from jumping when a thumbnail is mouse clicked on, goto _master/snippets/ProductTinyImage.html and change this -

Code: Select all

<a href="#">

For this -

Code: Select all

<a href="javascript:void(0)">

FINAL NOTE – There is a scripted relationship between the size of thumb nails, the spacing between and length of thumb nail container ‘ProductTinyImageList’. Consequently, the container may grow beyond the size of its page position or column boundary if you over size thumb nails in this mod. I would suggest that you might consider adding an outline to the container so you may see this effect as a temp guide and maybe adjust the thumb nails or work a mathematical resolve into your script !!

[Snooper]

This has to be common knowledge by now, but for newbies like myself...

Goto the _master/panels/Header.html locate and comment out - NOT remove -

%%Panel.PagesMenu%% so is now <!-- %%Panel.PagesMenu%% -->

Make a Table of two cells -

Code: Select all

        <table border="0" width="100%" height="43">
	        <tr>
		<td width="12%">
                   &nbsp;
		</td>
		<td width="88%" valign="top">
                   &nbsp;
		</td>
	      </tr>
	</table>

Locate the Footer.html - yoursite/panels. Add the table/menu (plus any site referance or copyrights) directly under the top line <div="Footer">, and always above the line %%GLOBAL_DebugDetails%% -

Code: Select all

		<div id="Footer">
      <table border="0" width="100%" height="43">
	        <tr>
		<td width="12%">
                   &nbsp;
		</td>
		<td width="88%" valign="top">
                                 <ul>
	                          <li class="First %%GLOBAL_ActivePageHomeClass%%">
                                          <a href="%%GLOBAL_ShopPathNormal%%/">
                                          <span>%%LNG_MainPage%%</span></a>
                                         </li>
			%%SNIPPET_PageMenu%%
                                 </ul> 
		</td>
	</tr>
	</table>

As a solution, yes it’s a table (a dirty approach I agree) but as a solution it works !

Now go to your sites main style.css and locate -

Code: Select all

/* Pages Menu */
#Menu {
	clear: both;
	margin: 0 0 12px;
	padding: 0 0 0 15px;
	height: 35px;
}

And change height to 0px;

Then locate -

Code: Select all

#Menu li a {
	display: block;
	float: left;
	font-size: 0.85em;
	font-weight: 400;
	text-align: center;
	padding: 10px 15px 0 15px;
	height: 20px;
}

And again change height to 0px;

Finally, go to the main .CSS of your web site template and add the following -

Code: Select all

#Footer li.First a {
border-left:none;
}

You can 'fine' tune the menu position by shifting values (in the table) between the lines from above ensuring that the combined total is no greater or smaller than 100% -

Code: Select all

<td width="12%">

<td width="88%" valign="top">