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:
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);
};
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
);
};
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.
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.
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:
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?
Before you post, read our: 
Javascript Out of Hand
