1,105,625 Community Members

jquery conflict?

Member Avatar
silent lover
Newbie Poster
23 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

i create 2 sliders within one page with code :

<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript">
    var $jq132 = $.noConflict();
</script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
    $(document).ready( function($){
        // buttons for next and previous item                        
        var buttons = { previous:$('#jslidernews1 .button-next') ,
                        next:$('#jslidernews1 .button-previous') };         
         $('#jslidernews1').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutKesatu',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons } );
        // buttons for next and previous item                        
        var buttons = { previous:$('#jslidernews2 .button-next') ,
                        next:$('#jslidernews2 .button-previous') };         
         $('#jslidernews2').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutExpo',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons } );  
    })($jq132);
</script>

but only one slider can be clicked. how to make 2 sliders can be clicked?

Member Avatar
pixelsoul
Posting Shark
920 posts since Feb 2011
Reputation Points: 174 [?]
Q&As Helped to Solve: 147 [?]
Skill Endorsements: 25 [?]
 
0
 

I am not completely sure what "only one slider can be clicked" but I imagine you are talking about the buttons. If that is the case you might want to try something like this.

<script type="text/javascript">
var $ = jQuery.noConflict();
    $(document).ready( function($){


        // buttons for next and previous item                        
        var buttons1 = { previous:$('#jslidernews1 .button-next') ,
                        next:$('#jslidernews1 .button-previous') };         
         $('#jslidernews1').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutKesatu',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons1 } );


        // buttons for next and previous item                        
        var buttons2 = { previous:$('#jslidernews2 .button-next') ,
                        next:$('#jslidernews2 .button-previous') };         
         $('#jslidernews2').lofJSidernews( { interval : 5000,
                                            direction       : 'opacitys',   
                                            easing          : 'easeInOutExpo',
                                            duration        : 1200,
                                            auto            : true,
                                            maxItemDisplay  : 7,
                                            start_item      : 2,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 58,
                                            navigatorWidth  : 57,
                                            mainWidth       : 470,
                                            buttons         : buttons2 } );  
    })($jq132);
</script>
Member Avatar
silent lover
Newbie Poster
23 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

thank you for the answer, i try to change(differentiate) var buttons but no significant result happens. What i mean is that javascript create two slider within one page. when i clicked "new item" the slider on "hot item" become display none, and vice versa.

I attached the problem screenshot which i got it from the website : http://eligium.gemscool.com/. The new item slider cannot be clicked, but hot item slider can be clicked. How to make both slider can be clicked?

Attachments new_item_hot_item.png 212.64KB
Member Avatar
silent lover
Newbie Poster
23 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Any solution from everyone?

Member Avatar
pixelsoul
Posting Shark
920 posts since Feb 2011
Reputation Points: 174 [?]
Q&As Helped to Solve: 147 [?]
Skill Endorsements: 25 [?]
 
0
 

It appears the link to the site you posted is not working. Is that your site where the problem is?

It may be easier to understand the problem if we saw it live somewhere, or at least in a jsFiddle page.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: