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>

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

  • 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 Oct 6 '14 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 Oct 6 '14 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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.