Javascript conflict

[london-G]

Basically, the slider does not work on my website. I think that this is due to a javascript conflict however i am not 100% sure about that.

I have used firebug and it came up with the error "TypeError: my_glider is undefined"

Here is the code:

<div class="homepage">

    <div id="slider">
        <div class="slidercontrolwr-left">
            <div class="slidercontrol">
                <a href="#" class="aprev" title="Previous" onClick="my_glider.previous();return false;">Previous</a>
            </div>
        </div>
        <div class="slidercontrolwr-right">
            <div class="slidercontrol">
                <a href="#" class="anext" title="Next" onClick="my_glider.next();return false">next</a>
            </div>   
        </div>
        <div class="scroller">
            <div class="content">
                <div class="section" id="section1">
                    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-slider1')->toHtml() ?>
                </div>
                <div class="section" id="section2">
                    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-slider2')->toHtml() ?>
                </div>
                <div class="section" id="section3">
                    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-slider3')->toHtml() ?>
                </div>
            </div>
        </div>
    </div>
    <script src="<?php echo $this->getSkinUrl('js/') ?>glider.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        var my_glider = new Glider('slider', {duration:0.5, autoGlide: true, frequency: 4, initialSection: 'section1'});
    </script>

    <div class="home-right">
        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-topbox')->toHtml() ?>
    </div>
    <div class="clearer"></div>

    <div class="home-box1">
        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-box1')->toHtml() ?>
    </div>
    <div class="home-box2">
        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-box2')->toHtml() ?>
    </div>
    <div class="home-box3">
        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('pt001-home-box3')->toHtml() ?>
    </div>
    <div class="clearer"></div>
    <?php /** echo $this->getLayout()->createBlock('core/template')->setTemplate('slider/home-slider.phtml')->toHtml() */ ?>  

</div>

Can someone help me to understand if there is somehting wrong with the declaration of glider?

[JorgeM]

Being able to see the HTML source code would make it easier, at least for me. Is this site online?

[london-G]

I think that's all there is for the code. Apart from the blocks which contains the links to the images.

So block pt001-home-box1 has this

<p><img src="{{media url="wysiwyg/test4.jpg"}}" alt="" width="796" height="410" /></p>

[london-G]

When I click on the next button, it adds a "#" at the end of the url

[JorgeM]

It's adding a"#" at the end of the URL because your hyperlinks' href attribute has a value of "#".

If you do not want your hyperlinks (<a>) to act link links, you generally use javascript/jQuery to change the default behavior.

Does this glider run as a jQuery plugin? If so, do you have the jQuery library loaded? Did you load this jQuery plug-in file as well?