Post by adrunkentheory » Sat Jun 19, 2010 4:53 am

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.

New member

Posts

Joined
Fri Apr 09, 2010 3:29 am

Post by Qphoria » Sat Jun 19, 2010 4:55 am

Why not stick with this discussion:
http://forum.opencart.com/viewtopic.php?f=24&t=16127

jqTools has that

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by adrunkentheory » Sat Jun 19, 2010 5:01 am

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.

New member

Posts

Joined
Fri Apr 09, 2010 3:29 am

Post by adrunkentheory » Sat Jun 19, 2010 5:02 am

Go ahead and delete this, I'll repost it.

New member

Posts

Joined
Fri Apr 09, 2010 3:29 am

Post by i2Paq » Sat Jun 19, 2010 5:05 am

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.

Norman in 't Veldt
Moderator OpenCart Forums

_________________ READ and Search BEFORE POSTING _________________

Our FREE search: Find your answer FAST!.

[How to] BTW + Verzend + betaal setup.


User avatar
Global Moderator

Posts

Joined
Mon Nov 09, 2009 7:00 pm
Location - Winkel - The Netherlands

Post by Xsecrets » Sat Jun 19, 2010 6:11 am

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.

OpenCart commercial mods and development http://spotonsolutions.net
Layered Navigation
Shipment Tracking
Vehicle Year/Make/Model Filter


Guru Member

Posts

Joined
Sun Oct 25, 2009 3:51 am
Location - FL US

Post by Qphoria » Sat Jun 19, 2010 7:58 am

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

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by i2Paq » Sat Jun 19, 2010 5:16 pm

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

Norman in 't Veldt
Moderator OpenCart Forums

_________________ READ and Search BEFORE POSTING _________________

Our FREE search: Find your answer FAST!.

[How to] BTW + Verzend + betaal setup.


User avatar
Global Moderator

Posts

Joined
Mon Nov 09, 2009 7:00 pm
Location - Winkel - The Netherlands
Who is online

Users browsing this forum: No registered users and 3 guests