Page 1 of 1

jQuery Advice

Posted: Sat Jun 19, 2010 4:53 am
by adrunkentheory
I am looking for a simple slideshow plugin that I can use. I know there's several of them on the jQuery site, but I'm just wondering if you guys have a favorite?

I'm not trying to do anything fancy. I just want to cycle through a few images automatically as a part of my welcome message. I don't need a navigation, or a start / stop feature or any controls for that matter. I just would like to continuously loop through the images.

Re: jQuery Advice

Posted: Sat Jun 19, 2010 4:55 am
by Qphoria
Why not stick with this discussion:
http://forum.opencart.com/viewtopic.php?f=24&t=16127

jqTools has that

Re: jQuery Advice

Posted: Sat Jun 19, 2010 5:01 am
by adrunkentheory
I already am a part of that discussion (kinda) , however, the Slideshow plugin for the Tabs feature that they have doesn't have an auto option, it requires the person to press the play button to start the animations. Unless I'm missing something, or looking at the wrong plugin all together.

Re: jQuery Advice

Posted: Sat Jun 19, 2010 5:02 am
by adrunkentheory
Go ahead and delete this, I'll repost it.

Re: jQuery Advice

Posted: Sat Jun 19, 2010 5:05 am
by i2Paq
Qphoria wrote:Why not stick with this discussion:
http://forum.opencart.com/viewtopic.php?f=24&t=16127

jqTools has that
I disagree, that post is about the tool, not about a slide-show solution based on jQuery.

Re: jQuery Advice

Posted: Sat Jun 19, 2010 6:11 am
by Xsecrets
well it doesn't say it specifically, but I bet if you put

Code: Select all

$(".slidetabs").data("slideshow").play(); 
adjusted for your id/class etc in the document ready function it would autoplay.

Re: jQuery Advice

Posted: Sat Jun 19, 2010 7:58 am
by Qphoria
i2Paq wrote:
Qphoria wrote:Why not stick with this discussion:
http://forum.opencart.com/viewtopic.php?f=24&t=16127

jqTools has that
I disagree, that post is about the tool, not about a slide-show solution based on jQuery.
But it has a slideshow solution.. hence the entire point of that thread... all of the things it has already all in one

Re: jQuery Advice

Posted: Sat Jun 19, 2010 5:16 pm
by i2Paq
Qphoria wrote:
i2Paq wrote:
Qphoria wrote:Why not stick with this discussion:
http://forum.opencart.com/viewtopic.php?f=24&t=16127

jqTools has that
I disagree, that post is about the tool, not about a slide-show solution based on jQuery.
But it has a slideshow solution.. hence the entire point of that thread... all of the things it has already all in one
OK, I see that the soution to the question in this topic has been posted there so I will add it here to and close this topic.

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