What it does: Slideshow where you just need to rotate pics. Great to showcase some pics or offers on homepage header.
Pros: Doesn't need any changes to any OC files so its version independent. Easy to upload pics and don’t have to worry about code as it is written one time. Easily put different slideshows on different pages or at different locations on the page. Just create another folder, change the pt 3 and place the new ones wherever you like to create a new slideshow.
Cons: no links to products. Haven't figured that out yet. If someone could be generous to help with that, it would be greatly appreciated.
Steps
1. Create a folder where you will upload all the images. E.g. name it “iframe” . I create it in (catalog/view/theme/your_theme/image/).
2. Paste the code below in a text doc and save it as an index.php file in the iframe folder. Code below.
Code: Select all
<?php header("Expires: 0"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("cache-control: no-store, no-cache, must-revalidate"); header("Pragma: no-cache");?>
<!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">
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<?php
$pattern = '/\.(png|gif|jpg|jpeg)$/i';
$dh = opendir('.');
$height = 0;
while (false !== ($filename = readdir($dh))) {
if (!is_dir($filename) && $filename[0] != '.' && preg_match($pattern, $filename)) {
$files[] = $filename;
if ($height == 0) {
list($width, $height) = getimagesize($filename);
}
}
}
$count = intval($_REQUEST['count']);
if ($count == 0) $count = 10;
/*
if (count($files) == 0) {
throw new Exception("No image files were found");
}
*/
shuffle($files);
if (count($files) > $count) {
array_splice($files, $count);
}
closedir($dh);
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, "linear", function() {$active.removeClass('active last-active');});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<style type="text/css">
body {padding:0; margin:0;}
#slideshow {position:relative; height:<?php echo $height ?>px;}
#slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
#slideshow IMG.active {z-index:10; opacity:1.0;}
#slideshow IMG.last-active {z-index:9;}
</style>
</head>
<body>
<div id="slideshow">
<?php
$first = true;
foreach ($files as $file) {
echo ' <img src="'.$file.'"'.($first ? ' class="active"' : '').' />';
$first = false;
}
?>
</div>
</body>
</html>
Code: Select all
<iframe src ="catalog/view/theme/your_theme/image/iframe/" width="960" height="241" scrolling="no" frameborder="0"></iframe>5. Pat yourself on the back and enjoy!
