3

I am trying to accsess the jquery plugin mentioned in the code but unfortunately nothing is showing up. Please help me with what am I doing wrong?

Thanks in advance.

    <script type="text/javascript">
        $(function() {
            $('#carousel').carouFredSel({
                direction: 'up',
                items: 1,
                scroll: {
                    fx: 'directscroll'
                },
                pagination: {
                    container: '#pager',
                    anchorBuilder: function( nr ) {
                        return '<a href="#" class="thumb' + nr + '"><img src="' + this.src + '" width="50" /></a>';
                    }
                }
            });
        });
    </script>

    <style type="text/css">
        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body {
            background: #ccd;
            min-height: 600px;
        }
        body * {
            font-family: Arial, Geneva, SunSans-Regular, sans-serif;
            font-size: 14px;
            color: #333;
            line-height: 22px;
        }
        #border, #wrapper {
            border-radius: 200px;
            overflow: hidden;
            width: 250px;
            height: 250px;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        #border {
            box-shadow: 0 5px 30px rgba(0,0,0,0.3);
            border: 25px solid #eee;
            margin: -165px 0 0 -150px;
            z-index: 0;
        }
        #wrapper {
            border: 10px solid #eee;
            margin: -150px 0 0 -135px;
            z-index: 2;
        }
        #carousel img {
            display: block;
            float: left;
        }

        #pager {
            width: 300px;
            margin: -15px 0 0 -150px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
        }
        #pager a {
            border: 5px solid #eee;
            border-radius: 30px;
            overflow: hidden;
            display: block;
            width: 50px;
            height: 50px;
            margin: 0 0 0 -30px;
            position: absolute;
            left: 50%;

            -webkit-transition: margin 0.5s ease;
            -moz-transition: margin 0.5s ease;
            transition: margin 0.5s ease;
        }
        #pager a.thumb1 {
            top: 45px;
            margin-left: -150px;
        }
        #pager a.thumb1.selected {
            margin-top: -20px;
            margin-left: -115px;
        }
        #pager a.thumb2 {
            top: 90px;
            margin-left: -98px;
        }
        #pager a.thumb2.selected {
            margin-top: -35px;
            margin-left: -85px;
        }
        #pager a.thumb3 {
            top: 110px;
        }
        #pager a.thumb3.selected {
            margin-top: -40px;
        }
        #pager a.thumb4 {
            top: 90px;
            margin-left: 38px;
        }
        #pager a.thumb4.selected {
            margin-top: -35px;
            margin-left: 25px;
        }
        #pager a.thumb5 {
            top: 45px;
            margin-left: 90px;
        }
        #pager a.thumb5.selected {
            margin-top: -20px;
            margin-left: 55px;
        }
    </style>
</head>
<body>
    <div id="border"></div>
    <div id="wrapper">
        <div id="carousel">
            <img src="img/toystory.jpg" width="250" height="250" />
            <img src="img/rat.jpg" width="250" height="250" />
            <img src="img/walle.jpg" width="250" height="250" />
            <img src="img/bugs.jpg" width="250" height="250" />
            <img src="img/incred.jpg" width="250" height="250" />
        </div>
    </div>
    <div id="pager"></div>
</body>

Improve this question

2 Answers 2

Reset to default
2

There are conflicts with using jQuery in Visualforce. You need to use the no conflict mode.

So rather than directly using the $ to access the jQuery object we give it a unique name:

j$ = jQuery.noConflict();

Then you Javascript uses that:

j$(function() {
    j$('#carousel').carouFredSel({
        // ...
    });
});

See Developing Apps with jQuery

Improve this answer
2
  • Hey Daniel. I am accessing the 'caroufredrousel' using this (carousel is the static resource name) : <apex:includeScript value="{!URLFOR($Resource.carousel)}"/> is it correct?
    – juhi
    Commented Oct 6, 2014 at 7:47
  • 1
    @juhi That depends how you created the resource. It is is a standalone Javascript file, then is seams reasonable. If it is a resource archive then you need an additional path. See Referencing a Static Resource in Visualforce Markup
    – Daniel Ballinger
    Commented Oct 6, 2014 at 8:52
2

First of all you need to include jquery file in your visualforce page. You can add jquery file in your static resource, then you can use following sample code in include jquery from static resource in your page:

<apex:includeScript value="{!URLFOR($Resource.StaticResName, 'StaticResName/js/jquery-1.8.3.min.js')}"/>

Also add following line in javascript code:

$ = jQuery.noConflict();
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .