CodingForums.com - Javascript Out of Hand

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Javascript Out of Hand (http://www.codingforums.com/showthread.php?t=257573)

Javascript Out of Hand

Hi, I've been working at a website for quite some time now, one for my portfolio that displays my graphics design talents. However when coding this website I've run into quite a few problems. The most concerning being the photo gallery I am trying to set up inside of my website. I believe the problem I have is that I have two conflicting scripts, (in which case, how do I 'unconflict' them?) I have a sliding image header and I am using lightbox to create my gallery. While the slider works, my images only work as normal links rather than popping up on the screen.
If you have any idea on how to fix this, please let me know. I am also open to other possibilities for a photo gallery.

Your problem description is too generic for us to give a solution. Which framework(s) are you using (jQuery, prototype??). Which plug-ins are you using? What is the code with which you embedded the framework(s) and plug-in(s)?

Sorry if my question seemed too generic. I'm used to figuring these things out on my own. I'll search for another method if I have to, but I really want this to work. So I'm not exactly sure what you mean, as I am less advanced in JS than HTML or CSS.
This is the javascript that I am working with in the galleries, all of the information is in here:
http://www.dynamicdrive.com/dynamici...box2/index.htm
As for the slider, this is what I am working with. And this does work:

Quote:

/*
* Easy Slider 1.5 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-s...in-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/

/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/

(function($) {

$.fn.easySlider = function(options){

// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: true
};

var options = $.extend(defaults, options);

this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = 830;
var h = 250;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(!options.vertical) $("li", obj).css('float','left');

if(options.controlsShow){
var html = options.controlsBefore;
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
html += options.controlsAfter;
$(obj).after(html);
};

$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});

function animate(dir,clicked){
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
break;
};

var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
speed
);
};

if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};

if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};

};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};

if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};

});

};

})(jQuery);

What else do you need to know to help me?

I really appreciate you taking your time to look at this by the way. Forgive me for not knowing exactly what needs to be shown to you. I'm somewhat inexperienced, but I'm so determined to figure out what the problem is.

Code:

/*

* Easy Slider 1.5 - jQuery plugin

* written by Alen Grakalic

* http://cssglobe.com/post/4004/easy-s...in-for-sliding

*

* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)

* Dual licensed under the MIT (MIT-LICENSE.txt)

* and GPL (GPL-LICENSE.txt) licenses.

*

* Built for jQuery library

* http://jquery.com

*

*/



/*

* markup example for $("#slider").easySlider();

*

* <div id="slider">

* <ul>

* <li><img src="images/01.jpg" alt="" /></li>

* <li><img src="images/02.jpg" alt="" /></li>

* <li><img src="images/03.jpg" alt="" /></li>

* <li><img src="images/04.jpg" alt="" /></li>

* <li><img src="images/05.jpg" alt="" /></li>

* </ul>

* </div>

*

*/



(function($) {



$.fn.easySlider = function(options){



// default configuration properties

var defaults = {

prevId: 'prevBtn',

prevText: 'Previous',

nextId: 'nextBtn',

nextText: 'Next',

controlsShow: true,

controlsBefore: '',

controlsAfter: '',

controlsFade: true,

firstId: 'firstBtn',

firstText: 'First',

firstShow: false,

lastId: 'lastBtn',

lastText: 'Last',

lastShow: false,

vertical: false,

speed: 800,

auto: false,

pause: 2000,

continuous: true

};



var options = $.extend(defaults, options);



this.each(function() {

var obj = $(this);

var s = $("li", obj).length;

var w = 830;

var h = 250;

obj.width(w);

obj.height(h);

obj.css("overflow","hidden");

var ts = s-1;

var t = 0;

$("ul", obj).css('width',s*w);

if(!options.vertical) $("li", obj).css('float','left');



if(options.controlsShow){

var html = options.controlsBefore;

if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';

html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';

html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';

if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';

html += options.controlsAfter;

$(obj).after(html);

};



$("a","#"+options.nextId).click(function(){

animate("next",true);

});

$("a","#"+options.prevId).click(function(){

animate("prev",true);

});

$("a","#"+options.firstId).click(function(){

animate("first",true);

});

$("a","#"+options.lastId).click(function(){

animate("last",true);

});



function animate(dir,clicked){

var ot = t;

switch(dir){

case "next":

t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;

break;

case "prev":

t = (t<=0) ? (options.continuous ? ts : 0) : t-1;

break;

case "first":

t = 0;

break;

case "last":

t = ts;

break;

default:

break;

};



var diff = Math.abs(ot-t);

var speed = diff*options.speed;

if(!options.vertical) {

p = (t*w*-1);

$("ul",obj).animate(

{ marginLeft: p },

speed

);

} else {

p = (t*h*-1);

$("ul",obj).animate(

{ marginTop: p },

speed

);

};



if(!options.continuous && options.controlsFade){

if(t==ts){

$("a","#"+options.nextId).hide();

$("a","#"+options.lastId).hide();

} else {

$("a","#"+options.nextId).show();

$("a","#"+options.lastId).show();

};

if(t==0){

$("a","#"+options.prevId).hide();

$("a","#"+options.firstId).hide();

} else {

$("a","#"+options.prevId).show();

$("a","#"+options.firstId).show();

};

};



if(clicked) clearTimeout(timeout);

if(options.auto && dir=="next" && !clicked){;

timeout = setTimeout(function(){

animate("next",false);

},diff*options.speed+options.pause);

};



};

// init

var timeout;

if(options.auto){;

timeout = setTimeout(function(){

animate("next",false);

},options.pause);

};



if(!options.continuous && options.controlsFade){

$("a","#"+options.prevId).hide();

$("a","#"+options.firstId).hide();

};



});



};



})(jQuery);

Ok you showed us the two plug-ins you are using (one is a jQuery plug-in the other is a "pure" Javascript plug-in) but you did not show us how you embedded those plug-ins and jQuery on YOUR PAGE.

Okay, thank you. I was confused as to what you meant.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DreamKey</title>

<link href="style/default.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="style/lightbox.css" type="text/css" media="screen" />





<script type="text/javascript" src="/js/prototype.js"></script>

<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="/js/lightbox.js"></script>



        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="js/easySlider1.5.js"></script>





                        

        </script>



    <script type="text/javascript" src="js/tabs.js"></script>

    

</head>

This is where I started to name them, then further beneath are just the header/navigation system. I'd read something about using the "body Onload" tag to separate the scripts. So I tried what was suggested, only for nothing to happen once again. This was what I inserted directly beneath the last bit:

Code:

<body onload="MM_preloadImages(‘/images/image-1.jpg’);initLightbox()">

Below the header/logo is this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DreamKey</title>

<link href="style/default.css" rel="stylesheet" type="text/css" />



        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="js/easySlider1.5.js"></script>

        <script type="text/javascript">

                $(document).ready(function(){        

                        $("#slider").easySlider();

                });        

        </script>



    <script type="text/javascript" src="js/tabs.js"></script>



</head>

Beneath that is the html linked to the easySlider

Then the navbar

And then the page content where it gets messed up:

Code:

<a href="images/posts/01.jpg" rel="lightbox" title="my caption">image #1</a>

Okay now I see that the lightbox is not a "pure" Javascript plug-in but rather a prototype plug-in. Prototype is another Javascript framework and it's generally never a really good idea to use more than one framework on the same page (although it works sometimes).

What you'll have to do: Switch jQuery to its noConflict mode and pray :-)

Code:

var $j = jQuery.noConflict();

(function($) {

   $(document).ready(function() {

      // your jQuery code goes here

   });

})($j);



// your prototype code goes here

Thank you for checking this out. I hope it does work, but may I ask you watch javascript file you are looking at? Or what section? I'm not quite sure where you are.

The code I provided with my last answer will be in the Javascript section of your page ... there should already be such a <script> tag (presumably where you call the plug-in methods)

Btw, there seems to be a "dangling" closing </script> tag in your code that doesn't belong to any opening <script> tag

Nope, the added code just spilled my easySlider all down my page. And the image still won't do what it's been told to. Hm, I wonder what on earth it could be? Do you think it's unfixable?

Without your code I cannot tell