Log in

View Full Version : Resolved Image gallery??


jonybigude
02-09-2012, 03:49 PM
Hello!!

I decided I wanted to have this effect on my image gallery:

http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/

So, I was following this tutorial:

http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery

My issue is that the tutorial is not really clear and apparently it has errors. My editing software says that there is a syntax error in


$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},

My editing program says that the error is in:
My editing program says that the error is in: var c = (this.t != "") ? "

Another issue that is killing me is that in the tutorial the author says that: "Once you inclued the gallery functions, you have to activate it. Like for the functions, you can embed it on your html page or put it in a separate .js file." - How do I activate it?? Is there an option on the software that I use to do it, like there is for attaching CSS files? Should I just save a separate .js file with the supplied code and the activation is done automatically??

This is it for now, hope somebody can actually help me out :)

Thanks in advance!
XManBG
02-11-2012, 09:59 PM
Actually I don't understand the idea behind this statement:

var c = (this.t != "")?("" + this.t):"";

If I'm interpreting it correctly, it says:
If "this.t" is not empty, then make "c" equal to "this.t", otherwise if "this.t" is empty, then make "c" also empty.
:) I'm sure it would be easier to write directly:

var c = this.t;
Try it out ;)

Next issue says to you to include the given lines of text from the tutorial somewhere in your html document (best between the <head> tags), or to put them in a separate .js file, which you have to include again. The activation happens with the call of these three functions, but you don't have to care about it. You don't have to do anything else.


Another issue that is killing me is that in the tutorial the author says that: "Once you inclued the gallery functions, you have to activate it. Like for the functions, you can embed it on your html page or put it in a separate .js file." - How do I activate it?? Is there an option on the software that I use to do it, like there is for attaching CSS files? Should I just save a separate .js file with the supplied code and the activation is done automatically??

This is it for now, hope somebody can actually help me out :)

Thanks in advance!
jscheuer1
02-11-2012, 10:32 PM
var c = (this.t != "") ? "
" + this.t : "";

Well there shouldn't be a line break there, it should be:


var c = (this.t != "") ? "" + this.t : "";

or perhaps:


var c = (this.t != "") ? " " + this.t : "";

Which would answer XManBG's question, as it would add a space if this.t is defined. Even without that though, if this.t is a number, doing it like that converts it to a string and to an empty string if this.t is 0. Or if this.t could be null or object even when false or empty, it prevents those from appearing as text in c, as some browsers will otherwise convert them to their string equivalents ('null', or 'object') under certain circumstances.

In any case, that line break has got to be removed.

There could also be other problems.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
jonybigude
02-13-2012, 09:30 AM
Hello all!

The fact is that after a while looking at his website i found out that he helps out people that PAY!! So, I'm left to conclude that he puts out a lot of nice tutorials there, but with a complicated english to understand, no sample files for download and some bugs on the code, so that people have to pay him to solve those problems! :mad:

Fortunately it's XXI century and there is a vast internet full of solutions and even before I saw your answers I found out this other tutorial WITH sample files to download and no bugs:

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

After implemented on the website I found out that it wasn't really what I was hoping for, so I decided to implement this one instead:

http://fancybox.net/

Works just fine, and it is really easy to implement. It's exactly what I was looking for!

Thank you so much all of you that helped me out with your answers, it was really thoughtful! Please keep on helping people like me!! :D