OpenCart Community

Posted: **Mon Nov 30, 2009 6:49 pm**

Ok guys hope you guys like it..Like in the title its a poor mans rotator/slideshow which means, no fancy features and functions. Simple image rotator.

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>

3. Insert this code where you want to display the slideshow.

Code: Select all

<iframe src ="catalog/view/theme/your_theme/image/iframe/" width="960" height="241" scrolling="no" frameborder="0"></iframe>

4. Upload the pics that you want to display in the folder “iframe”. Note that it will display all pics and clip the image if the size is bigger than the size mentioned. In the above e.g. pt 3 the size of the slideshow is 960 x 241. So change the size as you'd like and make all pics in the same size...just looks better.

5. Pat yourself on the back and enjoy!

Posted: **Mon Nov 30, 2009 10:14 pm**

you know damn well people are gonna want a demo

Posted: **Tue Dec 01, 2009 12:35 am**

I know Q..but its on my local PC..localhost...I don't have a website where I could display it. My gf's website is a live one and I can't play around with it.. :-)

Just to get an idea. I have attached a pic. The slideshow just smoothly moves on to the next pic.

Posted: **Wed Dec 02, 2009 1:57 am**

Everything makes sense but I couldn't make it happen. I suspect it was the part that said "Paste the code below in a text doc and save it as an index.php file in the iframe folder." I could only do that in dreamweaver (save as a php file). How do I save a doc to .php from Word or wordpad? Maybe that would be the ticket. I've been searching for a solution to the slideshow problem in OpenCart so hope this is the one. Anyone else out there given it a go? Amanda

Posted: **Wed Dec 02, 2009 7:11 am**

i have followed install yet cant seem to get it to work... just gives me an error with the banner. used coding and placed it in my footer... no working. im using a .jpg file and called it image_1.jpg

any help???

Posted: **Thu Dec 03, 2009 10:40 pm**

Are you changing the (catalog/view/theme/your_theme/image/) your_theme to the name of your theme? It is working great for me...no problems.

I could only do that in dreamweaver (save as a php file). How do I save a doc to .php from Word or wordpad? Maybe that would be the ticket.

If you just open a blank document in notepad++ and paste the code there and save it as a .php file it will solve your issue.

im using a .jpg file and called it image_1.jpg

jpg files are fine. I tried this as my footer file and it works.

Code: Select all

<div id="footer">
  <iframe src ="catalog/view/theme/classic_blue/image/iframe/" width="960" height="241" scrolling="no" frameborder="0"></iframe>
    <!--<div class="div1"><a onclick="window.open('https://www.paypal.com/uk/mrb/pal=W9TBB5DTD6QJW');"><img src="catalog/view/theme/classic_blue/image/payment.png" alt="" /></a></div>-->
<!-- 
OpenCart is open source software and you are free to remove the Powered By OpenCart if you want, but its generally accepted practise to make a small donatation.
Please donate via PayPal to donate@opencart.com
//-->
    <div class="div2"><?php echo $text_powered_by; ?></div>
<!-- 
OpenCart is open source software and you are free to remove the Powered By OpenCart if you want, but its generally accepted practise to make a small donatation.
Please donate via PayPal to donate@opencart.com
//-->
  </div>
</div>
</body></html>

Posted: **Thu Dec 03, 2009 10:46 pm**

Ok..I tried to copy and paste the script and save it in a php.file...it didnt work...May be this is the problem.

So I have attached the working index.php file here. Unzip it and save this file in the folder where you have the pics to upload.

Posted: **Fri Dec 04, 2009 1:52 am**

Still no luck. Followed all the folder directions:
catalog/view/theme/your_theme/image/iframe/
Instead, I get my general template instead of the slide show.
This is what the page looks like http://www.gracefulgardens.com/informat ... tion_id=20
It seems I am putting something in the wrong place! Ideas? Thanks for any help you can give. Amanda

Posted: **Fri Dec 04, 2009 6:12 pm**

Hi Amanda,

I looked at the source code of your site. From what I get, you want to display the slideshow in the footer..as you have the iframe code in the div footer. You are using the my theme name so it will surely not show.

The code for your site should be

Code: Select all

<iframe src ="catalog/view/theme/graceful/image/iframe/" width="960" height="241" scrolling="no" frameborder="0"></iframe>

For this to work. Follow the steps below.

1. Create a folder named "iframe" in "catalog/view/theme/graceful/image/" folder. Important for the code above to work...
2. Copy and paste the index.php file (i have attached one in the post above) in this "iframe" folder.
3. Put some jpg pics that you want to show in this "iframe" folder.
3. Copy and paste the code given above wherever you want to display the pics.
4. Change the dimensions of the slideshow to the ones you like (currently in the code I gave above its 960 px wide and 241 px high.

Hope it helps.

Posted: **Tue Dec 08, 2009 6:57 am**

Hi guys, I'm trying to get this to work but I get the following error message at the footer where I'm trying to display the images..

You can see it by visiting this URL = www.vanillasample.info/shop/

Any help will much appreciated!

Thanks in advance

Posted: **Tue Dec 08, 2009 7:09 am**

please ignore my last post. i fixed the problem. peace

Posted: **Wed Dec 09, 2009 5:54 pm**

Didn't see any slideshow in footer neither any error. Btw..nice header slideshow

jojo wrote:Hi guys, I'm trying to get this to work but I get the following error message at the footer where I'm trying to display the images..

You can see it by visiting this URL = http://www.vanillasample.info/shop/

Any help will much appreciated!

Thanks in advance

Posted: **Wed Dec 09, 2009 6:01 pm**

If you display the slideshow in header and want to display the slideshow only on the front page then change your header file to include some code as below.

Code: Select all

<?php if (sizeof($breadcrumbs) > 1) { ?>
<?php } else { ?>
<!--iframe slider-->
	<iframe src ="catalog/view/theme/............../image/iframe/" width="960" height="241" scrolling="no" frameborder="0"></iframe>
<!--eof iframe slider-->

Posted: **Wed Dec 30, 2009 6:15 am**

First of all thanks for this contribution. I would like to add a functionality that the picture in the banner will also refer to a product page (you can click on and than you are redirected to a product page). Can you tell me how to modify original code ? Thanks in advance.

Posted: **Tue Feb 23, 2010 9:53 pm**

Where exactly do I have to put -> <iframe src ="catalog/view/theme/your_theme/image/iframe/" width="960" height="241" scrolling="no" frameborder="0"></iframe> to have it like it is shown in the example?

Posted: **Tue Mar 09, 2010 1:11 pm**

Hi it was really good. Thank you

I want to move slower than this slideshow.Help me
I would like to refer to any image of a URL. Click on the image that will be redirected to another site.How do I do it?

Posted: **Sun Mar 14, 2010 3:19 am**

Im getting this error message just above the banner, any ideas whats causing it?

Notice: Undefined index: count in C:\Web\EasyPHP5.3.0\www\opencart_v1.4\catalog\view\theme\default\image\iframe\index.php on line 18

Thanks

Posted: **Tue Mar 16, 2010 1:20 am**

Could you not re-build this contribution and base it on this free image slideshow: http://www.dynamicdrive.com/dynamicinde ... deshow.htm

It works very well on the site I used it: http://www.hartwellcleaning.co.uk/ (not an opencart site)

Posted: **Fri Apr 30, 2010 1:25 pm**

Thankz vimal ... it really work well and look great !!

Posted: **Mon May 03, 2010 8:06 pm**

thanks!!

OpenCart Community

Poor mans image rotator/slideshow

Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow

Re: Poor mans image rotator/slideshow