Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
Content Slider :: SOLVED :: 
 
Phillip Hughes
Member
 
Total Posts:  34
Joined:  2008-05-18
 

I understand that the general preference is to integrate jQuery with Prototype and have them work together in harmony but the realization is that this is server-intensive and slow on client-side (Certain instances extremely slow !)

Moving forward from this it seems the community would like to irradicate Prototype completely and use just jQuery, which is possible, time consuming and not favoured by Magento so I can’t imagine it being in future releases which would make it extremely difficult to keep jQuery and up-to-date on your Magento version.

Please excuse me for my simple like instructions but I have read certain jQuery posts in particular that 70% of the community would find useless due to the way it is written.

So, here is a very quick/simple tutorial on how to use a JavaScript slider using the Prototype/Scriptalicious library (already included in magento).

1. Download glider-0.0.*.zip from http://code.google.com/p/missingmethod-projects/wiki/Glider

2. Within the zip there are 3 important files - glider.js, glider.css, example.html.

3. Move glider.js to /root/js/prototype/
Move glider.css to /root/skin/design/frontend/*template_name*/*template_name*/css/

4. Edit your /root/app/design/frontend/*template_name*/*template_name*/layout/page.xml (replace *template_name* with appropriate name) to include, (somewhere with the other addJs lines):

<action method="addJs"><script>prototype/glider.js</script></action>

Also add, (somewhere with the other addCss lines):

<action method="addCss"><stylesheet>css/glider.css</stylesheet></action>

5. Make sure you have refreshed all your Cache in Admin > System > Cache Manager.

6. Open up example.htm in your favourite Text Editor

Cut out/copy the following code from example.htm:

<div id="my-glider">
        <
div class="controls">
            <
a href="#section1">Section 1</a> | 
            <
a href="#section2">Section 2</a> |
            <
a href="#section3">Section 3</a> |
            <
a href="#section4">Section 4</a> |            
        </
div>
        
        <
div class="scroller">
            <
div class="content">
                <
div class="section" id="section1">
                    
Section 1
                    
<p>You can put any kind of HTML in here:</p>
                    <
img src="http://www.curbly.com/images/header_logo.gif" />
                </
div>
                <
div class="section" id="section2">
                    
Section 2
                    
<p>Style the sections however you want</p>
                </
div>
                <
div class="section" id="section3">
                    
Section 3
                    
<p>I-framesYesbut only if scrollbars are hidden:</p>                    
                    <
iframe src="http://www.example.com" style="overflow:hidden"></iframe>
                </
div>
                <
div class="section" id="section4">
                    
Section 4
                    
<p>FlashSort-of works:</p>                    
                    <
object width="200" height="150"><param name="movie" value="http://www.youtube.com/v/Ef-f7EeDpYI"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Ef-f7EeDpYI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="150"></embed></object>                    
                </
div>
            </
div>
        </
div>            
    </
div>
    <
a href="#" onclick="my_glider.previous();return false;">Previous</a> | <a href="#" onclick="my_glider.next();return false">Next</a>
    <
script type="text/javascript" charset="utf-8">
        var 
my_glider = new Glider('my-glider'{duration:0.5});
    
</script>

and paste in Admin > CMS> Manage Pages > Home Page (for example)

*You will notice when you goto you homepage you have a content slider, filled with random text / colour / flash and of an odd size.*

7. Open glider.css on your server to Edit.

8. Make adjustments to size and background colour / images of the section1 - section4 DIVs

9. Edit the code pasted in your CMS > Home Page (for example) to change the content of slides.

I hope this helps at least some people as my quest to get jQuery or mootools working in Magento, just for a content slider, has been long and unsuccessful and a quick post like this would of saved me hours and hours of my time.

Good luck !

 
Magento Community Magento Community
Magento Community
Magento Community
 
Discovery
Enthusiast
 
Total Posts:  767
Joined:  2007-12-29
 

If only I had read that post earlier!

I followed the same instructions with a different ‘slider’. I used http://www.dhonishow.de/ and the results are quite hypnotic! The specific code I borrowed was from:

http://lifedraft.de/projekte/dhonishow/

It works well in the 3 column layout and uses the Scriptaculous/Prototype. My CSS is for a narrow layout and I added it to styles.css (I use the blank template):

#dhonis { background-color: #144593; padding: 20px 2px; position: relative; z-index: 0; width: 514px; clear: both; overflow: hidden; margin 4px 0px}
#dhonis .middle { margin: 0 2px }
.dhonishow {
overflow: hidden;
float: left;
width: 170px;
font-family: “MS Trebuchet”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif;
}

.dhonishow * {
padding:  0;
margin: 0;
border:  none;
list-style: none;
}

.dhonishow-image { background: #fcd83f; text-align: left; position: relative; width: 170px; height: 170px; overflow: hidden }

.dhonishow-image li {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}

.dhonishow-navi {
margin-bottom: 2px;
color: #fff;
overflow: hidden;
width: 170px;
padding: 5px 0 5px 5px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.dhonishow-picture-alt {
font-weight: bold;
text-align: left;
float: left;
font-size: 11px;
line-height: 16px;
}

.dhonishow-navi .dhonishow-next-picture,
.dhonishow-navi .dhonishow-previous-picture {
text-indent: -999px;
width: 16px;
height: 18px;
float: right;
margin: 0;
cursor:  pointer;
-moz-outline: none;
}

.dhonishow-navi .dhonishow-next-picture {
margin-right: 15px;
background: url(/media/catalog/bonus/next.gif) no-repeat;
}

.dhonishow-previous-picture {
background: url(/media/catalog/bonus/previous.gif) no-repeat;
}

.dhonishow-next-picture:hover {
background: url(/media/catalog/bonus/next_hover.gif) no-repeat;
}

.dhonishow-previous-picture:hover {
background: url(/media/catalog/bonus/previous_hover.gif) no-repeat;
}

.dhonishow-navi .paging {
float: right;
font-size: 22px;
margin: 0 10px;
line-height:  20px;
}

and my code, pasted into the CMS homepage:

<div id="dhonis">
<div class="dhonishow effect_blind duration_2 hide_navigation autoplay_10">
<a href="/team-kit"><img src="/media/catalog/bonus/image1.jpg" width="170" height="170" alt="” /></a>
<a href="/workwear"><img src="/media/catalog/bonus/image2.jpg" width="170" height="170" alt="” /></a>
<a href="/promoprint"><img src="/media/catalog/bonus/image3.jpg" width="170" height="170" alt="” /></a>
<a href="/trophies"><img src="/media/catalog/bonus/image4.jpg" width="170" height="170" alt="” /></a>
</div>
<div class="dhonishow middle effect_horizontal duration_2 hide_navigation autoplay_10">
<a href="/team-kit"><img src="/media/catalog/bonus/image5.jpg" width="170" height="170" alt="” /></a>
<a href="/workwear"><img src="/media/catalog/bonus/image6.jpg" width="170" height="170" alt="” /></a>
<a href="/promoprint"><img src="/media/catalog/bonus/image7.jpg" width="170" height="170" alt="” /></a>
<a href="/trophies"><img src="/media/catalog/bonus/image8.jpg" width="170" height="170" alt="” /></a>
</div>
<div class="dhonishow effect_slide duration_2 hide_navigation autoplay_10">
<a href="/team-kit"><img src="/media/catalog/bonus/image9.jpg" width="170" height="170" alt="” /></a>
<a href="/workwear"><img src="/media/catalog/bonus/image10.jpg" width="170" height="170" alt="” /></a>
<a href="/promoprint"><img src="/media/catalog/bonus/image11.jpg" width="170" height="170" alt="” /></a>
<a href="/trophies"><img src="/media/catalog/bonus/image12.jpg" width="170" height="170" alt="” /></a>
</div>
</div>

The images are 170 pixel tiles, you can make them bigger if need be.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Jumentfolle
Member
 
Total Posts:  40
Joined:  2008-03-06
 

Hello,
this glider works great for me!
Could you juste tell me what I have to do to get this to slide on itself (without someone clicking on it)?
I don’t know much about javascript…
Thanks from France,
Sarah

 
Magento Community Magento Community
Magento Community
Magento Community
 
doctorlogos
Sr. Member
 
Avatar
Total Posts:  178
Joined:  2008-05-06
 

Quit <a> tags. Don´t think so?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Jumentfolle
Member
 
Total Posts:  40
Joined:  2008-03-06
 

as usual, I found the answer by myself…

ad

autoGlidetruefrequency4

after

duration:0.5,

in

var my_glider = new Glider(‘my-glider’{duration:0.5,});

works perfectly!

 
Magento Community Magento Community
Magento Community
Magento Community
 
lakefire
Jr. Member
 
Total Posts:  4
Joined:  2009-02-22
 

I am having issues getting this working.  I have Magento 1.2.1 using modern theme and followed these instructions.  I have made minor modifications but have always had bugs.  Here is a list of the current bugs:

1) There is a bar/box under the search box
2) Images do not scroll
3) When home page is loaded the first image is not located top left, but when you click on the images it moves it there
4) The Previous/Next buttons do not work. 

Here is my code for reference and a link to the website.
http://s62211.gridserver.com/index.php

Glider.js

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */

/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */

Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
    initialize
: function(wrapperoptions){
        this
.scrolling  false;
        
this.wrapper    = $(wrapper);
        
this.scroller   this.wrapper.down('div.scroller');
        
this.sections   this.wrapper.getElementsBySelector('div.section');
        
this.options    Object.extend({ duration1.0frequency3 }options || {});

        
this.sections.each( function(sectionindex{
          section
._index index;
        
});    

        
this.events {
          click
this.click.bind(this)
        
};

        
this.addObservers();
            if(
this.options.initialSectionthis.moveTo(this.options.initialSectionthis.scroller{ duration:this.options.duration });  // initialSection should be the id of the section you want to show up on load
            
if(this.options.autoGlidethis.start();
      
},
    
  
addObservers: function() {
    
var controls this.wrapper.getElementsBySelector('div.controls a');
    
controls.invoke('observe''click'this.events.click);
  
},    

  
click: function(event{
        this
.stop();
    var 
element Event.findElement(event'a');
    if (
this.scrollingthis.scrolling.cancel();
    
    
this.moveTo(element.href.split("#")[1]this.scroller{ duration:this.options.duration });     
    
Event.stop(event);
  
},

    
moveTo: function(elementcontaineroptions){
            this
.current = $(element);

            
Position.prepare();
        var 
containerOffset Position.cumulativeOffset(container),
         
elementOffset Position.cumulativeOffset($(element));

          
this.scrolling     = new Effect.SmoothScroll(container
                
{duration:options.durationx:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
          return 
false;
        
},
        
  
next: function(){
    
if (this.current{
      
var currentIndex this.current._index;
      var 
nextIndex = (this.sections.length == currentIndex) ? currentIndex 1;      
    
else var nextIndex 1;

    
this.moveTo(this.sections[nextIndex]this.scroller
      duration
this.options.duration
    }
);
  
},
    
  
previous: function(){
    
if (this.current{
      
var currentIndex this.current._index;
      var 
prevIndex = (currentIndex == 0) ? this.sections.length 
       
currentIndex 1;
    
else var prevIndex this.sections.length 1;
    
    
this.moveTo(this.sections[prevIndex]this.scroller
      duration
this.options.duration
    }
);
  
},

    
stop: function()
    
{
        clearTimeout
(this.timer);
    
},
    
    
start: function()
    
{
        this
.periodicallyUpdate();
    
},
        
    
periodicallyUpdate: function()
    

        
if (this.timer != null{
            clearTimeout
(this.timer);
            
this.next();
        
}
        this
.timer setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
    
}

}
);

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototypeEffect.Base.prototype), {
  initialize
: function(element{
    this
.element = $(element);
    var 
options Object.extend({
      x
:    0,
      
y:    0,
      
mode'absolute'
    
arguments[1] || {}  );
    
this.start(options);
  
},
  
setup: function() {
    
if (this.options.continuous && !this.element._ext {
      this
.element.cleanWhitespace();
      
this.element._ext=true;
      
this.element.appendChild(this.element.firstChild);
    
}
   
    this
.originalLeft=this.element.scrollLeft;
    
this.originalTop=this.element.scrollTop;
   
    if(
this.options.mode == 'absolute'{
      this
.options.-= this.originalLeft;
      
this.options.-= this.originalTop;
    

  }
,
  
update: function(position{   
    this
.element.scrollLeft this.options.position this.originalLeft;
    
this.element.scrollTop  this.options.position this.originalTop;
  
}
}
);

glider.css

div.scroller { 
    
/* modify width and height of scrolling section if necessary    */        
    
width650px
    
height375px;
    
overflowhidden;
    
border:1px solid #cccccc;
    
}
    div
.scroller div.section {
        
/* modify width and height of each section as needed (should match the size of the scroller window)    */        
        
width:650px;
        
height:375px;
        
overflow:hidden;
        
float:top;
        
padding:0em;        
        
}
    div
.scroller div.content {
        width
0px;
        
}

    div
#section2 {
        
background:#666666;
        
color:#ffffff;
        
}
 
Magento Community Magento Community
Magento Community
Magento Community
 
lakefire
Jr. Member
 
Total Posts:  4
Joined:  2009-02-22
 

CMS HTML page

<div id="my-glider-horizontal">
        <
div class="scroller">
            <
div class="content">
                <
div class="section" id="section1">
                    <
img src="/media/slides/slide1.jpg" />
                </
div>
                <
div class="section" id="section2">
                    <
img src="/media/slides/slide2.jpg" />
                </
div>
                <
div class="section" id="section3">
                    <
img src="/media/slides/slide3.jpg" />
                </
div>
            </
div>
        </
div>            
    </
div>
    <
div class="controls">
            <
a href="#section1"><img src="/media/slides/slide1_tb.jpg" /></a>
            <
a href="#section2"><img src="/media/slides/slide2_tb.jpg" /></a>
            <
a href="#section3"><img src="/media/slides/slide3_tb.jpg" /></a>
        <
a href="#" onclick="my_glider.previous();return false;">Previous</a> | <a href="#" onclick="my_glider.next();return false">Next</a>
</
div>
    <
script type="text/javascript" charset="utf-8">
        var 
my_glider = new Glider('my-glider-horizontal'{duration:0.5});
    
</script>
 
Magento Community Magento Community
Magento Community
Magento Community
 
lakefire
Jr. Member
 
Total Posts:  4
Joined:  2009-02-22
 

I have decided to go with another theme that already has a slider integrated with it.  Probably easier that way.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Onibi
Jr. Member
 
Avatar
Total Posts:  15
Joined:  2009-01-23
 

Hi

Thanks for this clear explanation.
Everything works fine exept previous and next that remain inactive.
Plus can’t get autoGlide to work.

I’m on Magento 1.3

Thanks in advance for your help.

Onibi

 
Magento Community Magento Community
Magento Community
Magento Community
 
lakefire
Jr. Member
 
Total Posts:  4
Joined:  2009-02-22
 
Onibi - 11 April 2009 04:57 AM

Hi

Thanks for this clear explanation.
Everything works fine exept previous and next that remain inactive.
Plus can’t get autoGlide to work.

I’m on Magento 1.3

Thanks in advance for your help.

Onibi

Onibi, I ended up going with this theme.  It’s free and maybe you can look into it’s code for guidance.

http://blog.templates-master.com/category/magento-themes/

 
Magento Community Magento Community
Magento Community
Magento Community
 
mtaylor
Jr. Member
 
Total Posts:  1
Joined:  2010-01-06
 

I am having the same problem, Next/Previous don’t work. Does anyone have a fix for this?

I’m getting a javascript error: Effect.SmoothScroll = Class.create(); effect is undefined but not sure if that is relevant.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
DvornukVladimir
Jr. Member
 
Total Posts:  18
Joined:  2009-09-13
 

Here is upgraded slider extension, wich you can use for slide any content you want,
it can be banners, html, video etc, enything you want..
And you can easy put this slider to any place in magento.
Check this Vslider

 
Magento Community Magento Community
Magento Community
Magento Community
 
designsforhealth
Jr. Member
 
Total Posts:  1
Joined:  2010-05-13
 

For those who had issues with Previous/Next not working and getting this error:

glider Effect.SmoothScroll is not a constructor

In my case, I realized I had been calling two instances of effects.js in the header - I had thought that the one bundled with Glider was different from the default Scriptaculous one.  I deleted the second instance in my header and everything seems to work fine.  smile Hope this helps!

 
Magento Community Magento Community
Magento Community
Magento Community
 
teekayo2
Jr. Member
 
Total Posts:  24
Joined:  2010-06-30
 

Oooh man, THANK YOU!

3 hours @ home in illness, nothing work and now… wow.

Thanks very much!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Kerstin0682
Jr. Member
 
Total Posts:  28
Joined:  2010-12-16
 

This is great and so easy. Thank you so much!

 
Magento Community Magento Community
Magento Community
Magento Community
 
English87
Sr. Member
 
Total Posts:  80
Joined:  2009-08-12
 

Thanks for posting this, saved me a lot of time!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2