How to resolve JQuery and Prototype issues to make them work on same page

How to resolve #jQuery, #Prototype, and #lightbox issues to make them work on same page http://is.gd/2uAGP #$-function

How to resolve #jQuery, #Prototype, and #lightbox issues to make them work on same page http://bit.ly/1yhMth

@DaPo http://bit.ly/4Kqsux Google est ton ami :p

Great, thanks for this

Hey Denis,
First of all nice design and concept for the website.
Are you planning for lightbox popup and sliding panel over this page.
Use:

or the code described in the post !
That will resolve JQuery, prototype and lightbox issues !

Tried implementing both solutions but it doesn’t seem to work. Calling jQuery and lightbox (+ prototype). The content slider and the lightbox functions are both disabled.

I must be doing something wrong… What follows below are the script calls in the section.

You can view the test site here: http://www.theadstore.com/testArea/tas/

- – - – - – - – - -

$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 8000, true);
$(“#featured”).hover(
function() {
$(“#featured”).tabs(“rotate”, 0, true);
},
function() {
$(“#featured”).tabs(“rotate”, 5000, true);
}
);
});

var $j = jQuery.noConflict();

// Use jQuery via $j(…)
$j(document).ready(function(){
$j(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).hide();

I tried copying and pasting the code for both solutions and it did not work. Do I need to edit the ‘div’ and ‘someid’ to some code on my site? My code is similar to your example (the prototype, lightbox and jquery are linked right before I inserted your code).

Thanks for your help!

Hi

This is driving me crazy. I have jquery’s lavaLamp and s3slider running. lavaLamp stopped functioning after s3slider’s script entered (s3slider working fine). Any help would be hugely appreciated!! Here’s how it looks:

Creativearc

$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })});

$(document).ready(function() {
$(‘#s3slider’).s3Slider({
timeOut: 4000
});
});

Thanks in advance for any help..

i hve conflict with prototype and jquery.
i hd try so many things to make it solve..unfortnatly i cant find d solution..please guide

Enter $.noConflict(); after the above

Thanks!
It Works Fine For Me!!!

If any have problems try this:
In the jquery code ……
You must :
1 .- jQuery.noConflict(); at the begining of the
2 .- Replace ALL $(whatelse) whit jQuery(whatelse)

It works for me.
Thanks again for the solution!
Obi.

Hi,
I am having problems implementing the above fix and was wondering if somebody could point me in the right direction as I am not that experienced in JS.
here is my header code:

jQuery(function($) {

$(‘.gallery_demo_unstyled’).addClass(‘gallery_demo’); // adds new class name to maintain degradability

$(‘ul.gallery_demo’).galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : ‘#main_image’, // the containing selector for our main image
onImage : function(image,caption,thumb) { // let’s add some image effects for demonstration purposes

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf(“Win”)!=-1) ) { // FF/Win fades large images terribly slow
image.css(‘display’,'none’).fadeIn(1000);
}
caption.css(‘display’,'none’).fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents(‘li’);

// fade out inactive thumbnail
_li.siblings().children(‘img.selected’).fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo(‘fast’,1).addClass(‘selected’);

// add a title for the clickable image
image.attr(‘title’,'Next image >>’);
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents(‘li’);

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is(‘.active’) ? ’1′ : ’0.3′;

// fade in the thumbnail when finnished loading
thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo(‘fast’,1); },
function() { _li.not(‘.active’).children(‘img’).fadeTo(‘fast’,0.3); } // don’t fade out if the parent is active
)
}
});
});

the Galleria is working fine but Lightbox is just opening the images in a new window. I have pasted your above code into the header but it just breaks Galleria!

Many thanks in anticipation.

J

well its like this:

js/prototype.js
js/scriptaculous.js?load=effects,builder
js/lightbox.js
js/jquery.j

js/jquery.galleria.pack.js

Hi. I am trying to use lightbox on a page that also uses various other scripts, such as “js/jquery-1.4.2.min.js”
And it seems to be lightbox’s script prototype.js that causes the problem along with the jquery.

I tried to follow the above fix, but I know so little about javascript, i couldn’t work out what you meant by for example “reassign var $j = jQuery;” How do I do that? In the jquery-1.4.2.min.js ? Or just in the page head? Or both?

I tried fix 1, just adding the “noConflict” lines in the head section of the page and that made no difference at all.

Please help!

<3