Magento - Scrolling Product Slider - HTML, XHTML, CSS, Design Questions - eCommerce Software for Growth

Log In

Username or Email

Password:

Forgot Password

or
Register

Skip to site navigation »
Skip to main content »
Skip to footer content »

Magento Forum

Scrolling Product Slider

Mandelina Total Posts: 63 Joined: 2008-09-26 Germany Ignore user	Hi there, i would like to add a scrolling product slider like on the diesel online store or on this online store Does anyone know how to realize this? Any tipps, tricks or ideas? Thanks in advance!
	Posted: February 27 2009 \| top

Mandelina Total Posts: 63 Joined: 2008-09-26 Germany Ignore user	Another example could be the apple product slider!?
	Posted: March 3 2009 \| top \| # 1

Mandelina Total Posts: 63 Joined: 2008-09-26 Germany Ignore user	bump! Still looking! Any ideas and suggestions are very much appreciated! Thanks in advance!
	Posted: April 30 2009 \| top \| # 2

demonkoryu Total Posts: 328 Joined: 2008-11-26 Dortmund, Germany Ignore user	You could do it with http://script.aculo.us/, which is shipped with Magento, some CSS and implement the list with the category listing block with a custom template..
	Posted: April 30 2009 \| top \| # 3

chadhenry Total Posts: 38 Joined: 2009-01-01 Ignore user	This site might help. I haven’t yet implemented this with Magento so I can’t give you specific directions related to Magento
	Posted: April 30 2009 \| top \| # 4

Mandelina Total Posts: 63 Joined: 2008-09-26 Germany Ignore user	Yes, this is exactly what i am looking for! Thank you very much!
	Posted: May 3 2009 \| top \| # 5

vesvello Total Posts: 97 Joined: 2007-12-01 Ignore user	Did someone make any advances with this? Thanks
	Posted: May 7 2009 \| top \| # 6

grooves1200 Total Posts: 122 Joined: 2008-02-01 Ignore user	this looks like it could be the future of sliders. a magento module would be awesome, though i guess you can just embed the thing otherwise: http://www.progressivered.com/cu3er/
	Posted: November 6 2009 \| top \| # 7

Lionheart81 Total Posts: 15 Joined: 2009-10-30 Ignore user	So if anyone has successfully implemented this, can you post some code snippets, or give us some clues how to do this ourselves? I am wanting to do this on upsells. Thanks!
	Posted: November 9 2009 \| top \| # 8

Lionheart81 Total Posts: 15 Joined: 2009-10-30 Ignore user	I was able to get a slider to display on the upsell view using jCarousel a jQuery plugin. It was actually pretty easy to do. Most of my efforts were on styling the look of the slider and hunting down where magento sets the number of items to be displayed (catalog.xml). Thanks to the writers of this code! jCarousel jCarousel comes with two skins that you can modify to your liking! This is how I had to change the upsell.phtml view to display in the slider. Basically change it to a list instead of a nasty table, yuck! <?php if(count($this->getItemCollection()->getItems(12))): ?> <div class="collateral-box up-sell"> <div class="head"><h4><?php echo $this->__('You may also be interested in the following product(s)') ?></h4></div> <div class="generic-product-grid catalog-listing" id="upsell-product-table"> <?php $this->setColumnCount(12); // uncomment this line if you want to have another number of columns. also can be changed in layout ?> <?php $this->resetItemsIterator() ?> <?php for($_i=0;$_i<$this->getRowCount();$_i++): ?> <ul class="carousel jcarousel-skin-ie7"> <?php for($_j=0;$_j<$this->getColumnCount();$_j++): ?> <?php if($_link=$this->getIterableItem()): ?> <li> <p class="product-image"><a href="<?php echo $_link->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(125) ?>" width="125" height="125" alt="<?php echo $this->htmlEscape($_link->getName()) ?>" /></a></p> <h5><a href="<?php echo $_link->getProductUrl() ?>"><?php echo $this->htmlEscape($_link->getName()) ?></a></h5> <?php echo $this->getPriceHtml($_link, true) ?> <?php echo $this->getReviewsSummaryHtml($_link) ?> </li> <?php else: ?> <li class="empty-product"> </li> <?php endif; ?> <?php endfor; ?> </ul> <?php endfor; ?> </div> <!-- <script type="text/javascript">decorateTable('upsell-product-table')</script> //--> </div> <?php endif ?> And this is all I had to change in order to get more products. Change the limit number to whatever you wish, I don’t know if the columns even matter anymore, but couldn’t hurt. `<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml"> <action method="setColumnCount"><columns>12</columns></action> <action method="setItemLimit"><type>upsell</type><limit>12</limit></action> </block>` Oh, I almost forgot, add this to head.phtml `<script type="text/javascript"> jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.carousel').jcarousel(); }); </script>`
	Posted: November 10 2009 \| top \| # 9

sean14538 Total Posts: 32 Joined: 2009-11-04 Gouldsboro, PA Ignore user	I managed to get cu3er running in magento! I have tested it is IE, Safari, and Opera, all working yet it will not initialize in firefox? I am going to post exactly what I did and maybe someone can figure out how to get it working in firefox. In CMS -> Pages -> “My Home Page” I added : `<reference name="top_slider"> <block type="cms/block" name="cu3er"> <action method="setBlockId"> <block_id>cu3er</block_id> </action> </block> </reference>` in the design section, I then made a CMS ->Static Block, with the title and identifier set to: cu3er and in the content section, I pasted: <script type="text/javascript" src="{{skin url=""}}cu3er/js/swfobject/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.xml = "{{skin url=""}}cu3er/config.xml"; flashvars.font = "Arial"; var attributes = {}; attributes.wmode = "transparent"; attributes.id = "slider"; swfobject.embedSWF("{{skin url=""}}cu3er/cu3er.swf", "cu3er-container", "925", "200", "9", "{{skin url=""}}cu3er/js/expressInstall.swf", flashvars, attributes); </script> <style type="text/css"> <!-- body { margin: 0% auto; text-align:center;} #cu3er-container {width:925px; outline:0;} --> </style> <div id="cu3er-container"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> </div> and then I configured the config.xml file: <?xml version="1.0" encoding="utf-8" ?> <cu3er> <settings> </settings> <slides> <slide> <url>http://www.mysite.com/cu3er/images/slider1.jpg</url> </slide> <!-- changing transition beetween first & second slide --> <transition num="3" slicing="vertical" direction="down"/> <slide> <url>http://www.mysite.com/cu3er/images/slider2.jpg</url> </slide> <!-- changing transition beetween second & third slide --> <transition num="4" direction="right" shader="flat" /> <slide> <url>http://www.mysite.com/cu3er/images/slider3.jpg</url> </slide> <transition num="10" slicing="vertical" direction="down" duration=".6" delay=".3" shader="none" cube_color="0x333333" z_multiplier="4" /> <!-- transitions properties defined in transitions template --> <slide> <url>http://www.mysite.com/cu3er/images/slider4.jpg</url> </slide> <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" /> <slide> <url>http://www.mysite.com/cu3er/images/slider5.jpg</url> </slide> <transition num="3" slicing="vertical" direction="down"/> <slide> <url>http://www.mysite.com/cu3er/images/slider6.jpg</url> </slide> <transition num="4" direction="right" shader="flat" /> <slide> <url>http://www.mysite.com/cu3er/images/slider7.jpg</url> </slide> <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" /> <slide> <url>http://www.mysite.com/cu3er/images/slider8.jpg</url> </slide> <slide> <url>http://www.mysite.com/cu3er/images/slider9.jpg</url> </slide> </slides> </cu3er> I hope this is all clear, you can then play around with the transitions by just changing the config.xml. I uploaded the cu3er directory structure to /skin/frontend/default/myskin/ folder making a cu3er folder in there, and to make it easier for me added it again in the root but you could just configure the xml for you skin folder. But it works!! just click on my name and the my web url to see it in action it is pretty! Sean
	Posted: November 15 2009 \| top \| # 10

sean14538 Total Posts: 32 Joined: 2009-11-04 Gouldsboro, PA Ignore user	It’s possibly just my copy of firefox, could anyone verify this?? Sean
	Posted: November 15 2009 \| top \| # 11

Martin Total Posts: 445 Joined: 2007-08-31 Brno \| London \| Los Angeles Ignore user	Win XP MUI + Firefox 3.5.5 => CU3ER on your web works with no problem ... Signature Custom Magento Development Extensions: Image Gallery \| Category Hotspots \| Order Comment Pro \| more to come ...
	Posted: November 19 2009 \| top \| # 12

madsm Total Posts: 34 Joined: 2008-09-26 Copenhagen, Denmark Ignore user	I tryed your method, but it doesnt work in firefox and explorer for me. So I did this: (what I have testet it works in safari, firefox, explorer, chrome) I imported it into images/flash/cu3er/ - remember to change that! <script type="text/javascript" src="{{skin url='images/flash/cu3er/js/swfobject/swfobject.js}}"></script> <object classid="clsid:cu3er.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="1000" height="300"> <param name=movie value="{{skin url='images/flash/cu3er/cu3er.swf'}}"> <param name=quality value=high> <param name="wmode" value="transparent"> <param name="id" value="slider"> <param name="FlashVars " value="xml={{skin url='images/flash/cu3er/config.xml}}"> <embed src="{{skin url='images/flash/cu3er/cu3er.swf'}}" quality=high wmode="transparent" id="slider" FlashVars="xml={{skin url='images/flash/cu3er/config.xml}}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1000" height="300"> </embed> </object>
	Posted: November 19 2009 \| top \| # 13

Otavio Total Posts: 69 Joined: 2008-09-12 Ignore user	Hey Guys! Been trying to insert Cu3er to my home page, without success. I literally copied every code, but even though, nothing seems to be loaded in my page. Is there any block that i should put in the CMS page (not in the design)? Is that XML right? Cu3er is at “root/cu3er” and also in “skin/frontend/default/myskin/cu3er” Signature Inusual -Móveis Exclusivos http://www.inusual.com.br
	Posted: November 19 2009 \| top \| # 14

Otavio Total Posts: 69 Joined: 2008-09-12 Ignore user	found what missed: In the content area of the CMS pu this code `{{block type="cms/block" block_id="cu3er"}}` thanks!! Signature Inusual -Móveis Exclusivos http://www.inusual.com.br
	Posted: November 19 2009 \| top \| # 15

Magento Community

Magento Community

Back to top

CSS for styled static blocks and pages: Where to put it? Existing CSS files or new?

Accessing a page using Layout Handles