Page 1 of 2

Jquery slideshow

Posted: Thu Apr 14, 2011 12:07 pm
by netjet
Guys,

I'm still looking for a slideshow that calls product. It's better to have it with javascript, jquery.
But It looks like no one have managed to do this??

Thanks

Re: Jquery slideshow

Posted: Tue Apr 19, 2011 3:05 pm
by Tony Barnes
Do you have a bit more info on what you need?

Re: Jquery slideshow

Posted: Sun May 01, 2011 10:27 am
by netjet
Tony, no I still didn't find a solution. Can someone help please ?

Re: Jquery slideshow

Posted: Tue May 03, 2011 12:43 pm
by Tony Barnes
I mean, what do you want?!

Where is this for - category views? How many products need calling? Is this just a replacement for an existing panel? Etc? ;) :D

Re: Jquery slideshow

Posted: Wed May 04, 2011 4:26 pm
by meules
Tony Barnes wrote:I mean, what do you want?!

Where is this for - category views? How many products need calling? Is this just a replacement for an existing panel? Etc? ;) :D
Tony,

The guy wants a jquery slide banner on the homepage which shows products that are set in the "featured products" panel. Or just some random products. Like this top banner: http://www.templatemonster.com/demo/32645.html. Products have to be called automatically. So products which are featured for example are shown automatically in this rotating banner. Actually I'm looking for the same ;) I do have a rotating banner, but I don't have a clue how to call products automatically with jquery.

Re: Jquery slideshow

Posted: Thu May 05, 2011 8:13 am
by netjet
Meules, do you have a rotating banner? Can you advise me please?
Having the products called is next step for me, first I would like to have a simple slideshow that I can use promo or only picture like here http://www.hydratec.ma

Thanks

Re: Jquery slideshow

Posted: Thu May 05, 2011 12:16 pm
by Tony Barnes
Ok, in that case, have thrown together a quick demonstration that needs tidying, but works - http://www.savant-health.com/products/test.html

Grab a copy of anythingslider - https://github.com/ProLoser/AnythingSlider/downloads - upload the folder to /javascript/jquery/plugins/ProLoser-AnythingSlider-baf5c63

Copy/rename the following files:

/templates/_master/Panels/HomeFeaturedProducts.html > /templates/_master/Panels/HomeSlidingProducts.html
/templates/_master/Snippets/HomeFeaturedProducts.html > /templates/_master/Snippets/HomeSlidingProducts.html
/templates/_master/Snippets/HomeFeaturedProductsItem.html > /templates/_master/Snippets/HomeSlidingProductsItem.html
/includes/display/HomeFeaturedProducts.php > /includes/display/HomeSlidingProducts.php

Open /includes/display/HomeSlidingProducts.php, change contents to this:

Code: Select all

<?php
class ISC_HOMESLIDINGPRODUCTS_PANEL extends PRODUCTS_PANEL
{
	public function SetPanelSettings()
	{
		$count = 0;
		$GLOBALS['SNIPPETS']['HomeSlidingProducts'] = '';

		$GLOBALS['AlternateClass'] = '';

		$query = $this->getProductQuery('p.prodfeatured=1', 'RAND()', getConfig('HomeFeaturedProducts'));
		$result = $GLOBALS['ISC_CLASS_DB']->Query($query);
		while($row = $GLOBALS['ISC_CLASS_DB']->Fetch($result)) {
			$this->setProductGlobals($row);
			$GLOBALS['SNIPPETS']['HomeSlidingProducts'] .= $GLOBALS['ISC_CLASS_TEMPLATE']->GetSnippet("HomeSlidingProductsItem");
		}


	}
}
Open /templates/_master/Panels/HomeSlidingProducts.html, change contents to this:

Code: Select all

						<ul id="slider1">
							%%SNIPPET_HomeSlidingProducts%%
						</ul>

<script type="text/javascript">$('#slider1').anythingSlider({
                                width : 120,
								height : 240,
                                easing: 'easeInOutExpo',
								autoplay : true
                        });</script>
Open /templates/_master/Snippets/HomeSlidingProductsItem.html, change to:

Code: Select all

							<li>
								<div  class="ProductList">
								<div class="ProductImage">
									%%GLOBAL_ProductThumb%%
								</div>
								<div class="ProductDetails">
									<strong><a href="%%GLOBAL_ProductLink%%">%%GLOBAL_ProductName%%</a></strong>
								</div>
								<div class="ProductPriceRating">
									<em>%%GLOBAL_ProductPrice%%</em>
									<span class="Rating Rating%%GLOBAL_ProductRating%%"><img src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ProductRating%%.gif" alt="" %%GLOBAL_ProductRatingImageDimensions%% style="%%GLOBAL_HideProductRating%%" /></span>
								</div>
								<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
									<a href="%%GLOBAL_ProductURL%%">%%GLOBAL_ProductAddText%%</a>
								</div>
								</div>
							</li>  
Adjust the size of the block in here dependant on your site

Open your HTMLhead.html, add this in:

Code: Select all

<link media="screen" type="text/css" href="/javascript/jquery/plugins/ProLoser-AnythingSlider-baf5c63/css/anythingslider.css" rel="stylesheet">
<script charset="utf-8" type="text/javascript" src="/javascript/jquery/plugins/ProLoser-AnythingSlider-baf5c63/js/jquery.anythingslider.js">
Open up whatever pages you want to call the items in, and add in

Code: Select all

%%Panel.HomeSlidingProducts%%
Done.

Like I said, its a bit of a fugly first step, but you can change all the css/images, etc, and tweak to your hearts content. This will pull up Featured products - you can control the amount by replacing

Code: Select all

getConfig('HomeFeaturedProducts')
with any number, if you want it to pull up different products, you will need to tweak the php in HomeSlidingProducts.php

Simple as that really :D

Re: Jquery slideshow

Posted: Thu May 05, 2011 4:51 pm
by meules
Sweet :mrgreen:

Re: Jquery slideshow

Posted: Thu May 05, 2011 5:23 pm
by Tony Barnes
:D

Re: Jquery slideshow

Posted: Thu May 05, 2011 5:39 pm
by Tony Barnes
Oh, here's the info page for all the different settings - http://css-tricks.com/examples/AnythingSlider/ - I've added a 2nd one to the examples, without the navigation gubbins. No way to turn off the start button seemingly - I guess that would need hacking out the .js... one moment... ah, too late, lift is here! lol!

Well, this might not be the perfect slider to use with these controls tagged on, but you can use the same basics to add in any slider you find out there :D