By SuperRookie on
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
So basically the problem seems to be from the code that sets up the reverse side of the flip cards, which is what was isolated at the top. At least I think that because everything else works.
UPDATE: I think the problem might be that this code is written for jquery 1.3.1 and D7 uses 1.4.4. Is there a huge difference?
Edit ~dman : fixed code tag.
Comments
There is a whole bunch I
There is a whole bunch I could critique with that code - copy & paste of essentially the same funching 12 times makes my eyes water. It would be nicer if you looked into looping control structures and paramaterize the *one* function that does flipping for you.
But that would take too long right now.
Instead, I'll just look at your actual problem.
I use the DOM Inspector (Chrome) and Firebug (Firefox)
You should also.
From this I was able to select the elements that should be changing, and see what their properties are. Amazingly, your code is actually working as expected.
The only thing that has caught you out is a line in your CSS (which is probably the difference between your exclusive test page and running the same code in a drupal environment).
All your *B* images are set "display:none"
So even when your animation "reveals" them by changing their size, they are still invisible.
Mostly logical when you look at it.
Solution 1, remove that display directive from your css. Maybe replace it with a "width:0" instead, as that will probably be compatible with your animated reveal.
Or Solution 2, maybe your script should set display back on when it starts trying to show the item.
or Solution 3, shop around a little more to see if anyone has similar solutions that are designed to would with Drupal views and objects. What you are building is only ever going to be static and limited with hard-coded values like that. A Drupal site should be creating a grid like that from updateable data instead. Maybe overkill for you right now, but it's the only way to build anything worth getting feedback on in the Drupal forums.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
Thanks!
Removing the display:none in the css made it start working again! The funny thing is it was working when I directly referenced the jquery library at google, but not when it made use of drupals built in jquery support. Many thanks! The reason I hard coded it is that trying to make it work randomly is way over my head. Again, many thanks!
SR