Jquery slideshow

[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

[Tony Barnes]

Do you have a bit more info on what you need?

[netjet]

Tony, no I still didn't find a solution. Can someone help please ?

[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?

[meules]

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?

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.

[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

[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

[meules]

Sweet

[Tony Barnes]

[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