Working demo of what mine looks like and how it works: http://www.12voltsupplyhouse.com/" onclick="window.open(this.href);return false;
So, without further a-do here goes nothings:
Integrate the jQuery UI
OpenCart does not include the jQuery UI by default from what I could tell so I simply copied the jQuery UI code and saved it to the proper location and then included it in my template.
1. Go to http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" onclick="window.open(this.href);return false; and copy all of the text (CTRL-A + CTRL-C)
2. Create a new file: catalog/view/javascript/jquery/jquery-ui-1.5.3.min.js
3. Open: catalog/view/theme/YOUR_THEME/template/common/header.tpl and add the following line between <head> and </head>
Code: Select all
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-ui-1.5.3.min.js"></script>As you can tell my home page is completely different than the rest of the website. I do not have any of the modules displayed on the home page. My home page is completely custom. I have integrated my featured content slider on my home page so that directions below use the home page template.
1. Open: catalog/view/theme/YOUR_THEME/template/common/home.tpl and add the following line under the header, and/or column_left, and/or column_right code:
Code: Select all
<script type="text/javascript">$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);});</script>These styles are specific to my content slider so with this CSS your slider will look identical to mine, minus the red background image (unless you take mine). You can put the styles in home.tpl directly or in your stylesheet. I put mine at the top of the home.tpl file under the JS code that we previously added.
Code: Select all
<style type="text/css">
#featured { background:#ffffff; height:250px; padding-right:250px; position:relative; width:745px; }
#featured ul.ui-tabs-nav { left:720px; list-style:none; margin:0px; padding:0px; position:absolute; top:0px; width:275px; }
#featured ul.ui-tabs-nav li { border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; color:#666666; font-size:12px; }
#featured ul.ui-tabs-nav li span { font-size:14px; font-weight:bold; padding:5px; }
#featured ul.ui-tabs-nav li small { font-size:11px; padding:5px; }
#featured .ui-tabs-panel { background:#ffffff; border:1px solid #cccccc; height:243px; overflow:hidden; position:relative; width:720px; }
#featured .ui-tabs-hide { display:none; }
#featured li.ui-tabs-nav-item a { background:#ffffff; color:#000000; display:block; height:60px; line-height:30px; outline:none; text-decoration:none; }
#featured li.ui-tabs-nav-item a:hover { background:#f5f5f5; text-decoration:none; }
#featured li.ui-tabs-selected { color:#ffffff; text-decoration:none; }
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:transparent url('catalog/view/theme/12volt/image/selected-item.gif') no-repeat; color:#ffffff; text-decoration:none; }
#featured ul.ui-tabs-nav li img { background:#fff; border:1px solid #eee; float:left; margin:2px 5px; padding:2px; }
#featured .ui-tabs-panel .info { background:url('catalog/view/theme/12volt/image/transparent-bg.png'); left:0px; height:70px; position:absolute; top:180px; width:400px; }
#featured .info h2 { color:#fff; font-family:Georgia, serif; font-size:18px; margin:0px; overflow:hidden; padding:5px; }
#featured .info p { color:#f0f0f0; font-family:Verdana; font-size:11px; line-height:15px; margin:0px 5px; }
#featured .info a { color:#fff; text-decoration:none; }
#featured .info a:hover { text-decoration:underline; }
</style>
Integrate the HTML code
The HTML code is pretty straight forward. You will want to add the code below to wherever you want the slider to appear.
Code: Select all
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" style="border-top:1px solid #cccccc;">
<a href="#fragment-1">
<span>Car Audio/Video & Security</span><br />
<small>The latest in car alarms, stereos and other electronics.</small>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2">
<span>Marine Electronics</span><br />
<small>The best brands in marine stereos and electronics.</small>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3">
<span>Public Forums</span><br />
<small>Need Help? Check out our active community!</small>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4">
<span>Connectors & Diagrams</span><br />
<small>The largest selection of connectors and diagrams.</small>
</a>
</li>
</ul>
<div id="fragment-1" class="ui-tabs-panel"><a href="URL_HERE"><img src="image/featured/car-audio-video-security.jpg" alt="" /></a></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"><a href="URL_HERE"><img src="image/featured/marine-electronics.jpg" alt="" /></a></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"><a href="URL_HERE"><img src="image/featured/public-forums.jpg" alt="" /></a></div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"><a href="URL_HERE"><img src="image/featured/wiring-diagrams-connectors.jpg" alt="" /></a></div>
</div>
Conclusion
All in all, this is a really easy integration I think. If I am wrong, let me know. If you need any help, please feel free to private message me. I am a very nice and easy going person so I will be happy to help. I would prefer that you posted here in the thread though so that if someone else is having the same problem, I can answer the question to everyone.
Enjoy and happy coding!
