Works like a charm. Thank you...
For those who are trying to accomplish the same thing, here's a demo and small tutorial.
DEMO:
http://flowplayer.org/tools/demos/scrol ... /chain.htm
TUTORIAL:
* This tutorial will put a slideshow on your Open Cart homepage.
1.)
Download jQuery tools. I chose this one:
http://cdn.jquerytools.org/1.2.3/all/jq ... ols.min.js
- You do not need the full lib since it's already included in Open Cart by default.
2.)
Upload the tools to your website
- I chose this location: catalog/view/javascript/jquery/
- Mine looks like this: catalog/view/javascript/jquery/jquery.tools.min.js
3.) If you haven't already,
create a new theme by following these instructions
-
http://www.opencart.com/index.php?route ... path=43_44
- These instructions create a theme named "silverfish" so I will be using that as my example.
3.)
Edit your new header.tpl file
- catalog/view/theme/
silvervish/template/common/header.tpl (Do not edit your default header.tpl)
- Include this line between your <head></head> tags:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.tools.min.js"></script>
-
Save and Upload
4.)
Go to http://flowplayer.org/tools/demos/scrol ... /chain.htm
- View the page source in your browser by clicking on
View > Page Source (Firefox)
- Here you will see everything you need to get it working.
5.)
Go into your admin panel. Admin > Settings > Store
- In your Welcome Message area click on the
Source button.
- Paste the following code:
Code: Select all
<div class="navi"></div>
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable" id=chained>
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
<br clear="all" />
<!-- javascript coding -->
<script type="text/javascript">
$(document).ready(function() {
$("#chained").scrollable({circular: true, mousewheel: true}).navigator().autoscroll({
interval: 3000
});
});
</script>
-
Save your changes
6.)
Open your new "silverfish" stylesheet found at: catalog/view/theme/
silverfish/stylesheet/stylesheet.css
- Scroll to the bottom and paste the following code:
Code: Select all
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:url(/img/global/gradient/h300.png) repeat-x;
}
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
background:url(../img/scrollable/arrow/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down {
background:url(../img/scrollable/arrow/vert_large.png) no-repeat;
float: none;
margin: 10px 50px;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
/* position and dimensions of the navigator */
.navi {
margin-left:328px;
width:200px;
height:20px;
}
/* items inside navigator */
.navi a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.navi a:hover {
background-position:0 -8px;
}
/* active state (current page state) */
.navi a.active {
background-position:0 -16px;
}
-
Save and Upload
Notes:
- Change the image references as needed.
- You may change the stylesheet settings to whatever you prefer.
- The stylesheet by default calls remote images, either download the required files or recreate them for a custom look.
- To change the amount of scrolling images, just insert DIV tags where needed.
i.e. If you only want to scroll one image at a time it would look something like this:
Code: Select all
<div class="navi"></div>
<div class="scrollable" id="chained">
<!-- root element for the items --> <div class="items">
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /></div>
<div>
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /></div>
<div>
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /></div>
<div>
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /></div>
<div>
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /></div>
</div>
</div>
- That will slide 5 individual images separately. Add as many as you want.
Please note that including the Javascript function inside the welcome message is actually a bad practice, but will still work fine and is easiest to get this working. To learn more, See:
http://flowplayer.org/tools/documentati ... ment_ready.
I think that's about it, feel free to edit this post if I forgot something, or added something that's unnecessary.
Enjoy
