I'm not sure if this is the right place to be posting this, but perhaps somebody can help me. I'm way over my head on this one, and I'm SHOCKED that I was able to get this far. I made a 12 panel photo mosaic (3 rows with 4 photos on each) that flip over one after the other. I found a small code snippet that flipped pictures on click and worked it into this mosaic, and IT WORKS!!!

Or at least it did.

When I integrated it into the front page of my drupal site, it required that I call
http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

Which I did in my template. This of course broke every other jquery object on the page. It still worked, but not quite what I was looking for. I then dissected the differences between the other jquery script on the page. I found that they all use:
jQuery(document).ready(function($) {
I was using:
$(document).ready(function(){

So I changed that and then everything started working... almost. When the images flip, the other side is not being revealed. I'm absolutely certain that the problem is here:

$("#image1b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image2b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image3b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image4b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image5b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image6b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image7b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image8b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image9b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image10b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image11b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image12b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});

But as this is the first time I've worked with JQuery I have no idea what the problem is. It seems like maybe the snippet I worked from is outdated? Does anyone know what is causing this? Here is the full js script that is acting up:

jQuery(document).ready(function($) {

var margin =$("#image1a").width()/2;
var width=$("#image1a").width();
var height=$("#image1a").height();

$("#image1b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image2b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image3b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image4b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image5b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image6b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image7b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image8b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image9b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image10b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image11b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image12b").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});

function flip1over(){
$("#image1a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image1b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip7over();
}
});
}
});
}

function flip1back(){
$("#image1b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image1a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip7back();
}
});
}
});
}

function flip2over(){
$("#image2a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image2b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip5over();
}
});
}
});
}

function flip2back(){
$("#image2b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image2a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip5back();
}
});
}
});
}

function flip3over(){
$("#image3a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image3b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip12over();
}
});
}
});
}

function flip3back(){
$("#image3b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image3a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip12back();
}
});
}
});
}

function flip4over(){
$("#image4a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image4b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip9over();
}
});
}
});
}

function flip4back(){
$("#image4b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image4a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip9back();
}
});
}
});
}

function flip5over(){
$("#image5a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image5b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip11over();
}
});
}
});
}

function flip5back(){
$("#image5b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image5a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip11back();
}
});
}
});
}

function flip6over(){
$("#image6a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image6b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip8over();
}
});
}
});
}

function flip6back(){
$("#image6b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image6a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip8back();
}
});
}
});
}

function flip7over(){
$("#image7a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image7b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip10over();
}
});
}
});
}

function flip7back(){
$("#image7b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image7a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip10back();
}
});
}
});
}

function flip8over(){
$("#image8a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image8b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip1back();
}
});
}
});
}

function flip8back(){
$("#image8b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image8a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip1over();
}
});
}
});
}

function flip9over(){
$("#image9a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image9b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip2over();
}
});
}
});
}

function flip9back(){
$("#image9b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image9a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip2back();
}
});
}
});
}

function flip10over(){
$("#image10a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image10b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip4over();
}
});
}
});
}

function flip10back(){
$("#image10b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image10a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip4back();
}
});
}
});
}

function flip11over(){
$("#image11a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image11b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip3over();
}
});
}
});
}

function flip11back(){
$("#image11b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image11a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip3back();
}
});
}
});
}

function flip12over(){
$("#image12a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image12b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip6over();
}
});
}
});
}

function flip12back(){
$("#image12b").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500, complete:
function() {
$("#image12a").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500, complete:
function() {
flip6back();
}
});
}
});
}

flip1over();

});

The page can be seen at:
http://www.kingprods.com/gavin

Hope someone can help, or at least tell me where this should be posted.

Comments

tstoeckler’s picture

tstoeckler
he/him
Primary language German
Location Essen, Germany
commented
Status: Active » Closed (won't fix)

Please post such things in the forums: http://drupal.org/forum
Sorry, but this really isn't the right place.
If you were having a problem with a module, you could post in that module's issue queue, but it seems you used an external script/snippet.

Two things of note, though, that might (or might not) help you:

I'm going to close this issue. Hope you can find some help in the forums!

SuperRookie’s picture

SuperRookie commented

Thanks, I really didn't know where to post this, as I wasn't sure where drupal got it's jquery functionality from. I'll post this in the forum.