JQuery Issues?

[MatthewSchenker]

Greetings,

I've been getting acquainted with ProcessWire in the past couple of weeks, and really like it! But I'm encountering an issue, which I have hesitated to ask about because it's so basic.

But here goes...

I'm trying to implement FancyBox as a way of expanding images for artist gallery pages. I've added the actual FancyBox JS and CSS files in my head.inc file, like this:

<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery.fancybox.js?v=2.1.3"></script>

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/jquery.fancybox.css?v=2.1.3" />

I then loop through a series of images that were entered via a form. Here are the relevant lines in my template:

<?php
foreach ($page->artist_images as $image) {
 $large = $image->size(640, 480);
 $thumb = $image->size(200, 150);
?>
<li class="picture_box">
<a class="fancybox" rel="gallery1" href="<?php echo $large->url; ?>" title="title goes here">
<img src="<?php echo $thumb->url; ?>" alt="" />
</a>
</li>

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
 openEffect : 'none',
 closeEffect : 'none'
});
});
</script>

<?php
}
?>

</div>

But instead of seeing the FancyBox effect, the thumbnail links to the large image with no JQuery.

I've used FancyBox this way a thousand times... Well, OK, I slightly exaggerate!

I'm sure I'm missing something very obvious. Can someone please tell me what I've done wrong?

Here's the test site where I'm building this: http://50.22.43.59/~racc/galleries/artist1/

Thanks,

Matthew

[Wanze]

Hi MatthewSchenker,

I just had a quick look over your code and website. There didn't show up any Js errors.

But in the template code, you are also looping the Javascript code, so this is printed out with every image.

Remove it from the loop and insert this JS-Code in the head or before the </body> tag:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
 openEffect : 'none',
 closeEffect : 'none'
});
});
</script>
</body>
</html>

Does this solve your issue?

[MatthewSchenker]

Hi Wanze,

Thanks for jumping in to help!

Unfortunately, that's not the problem. I did accidentally put the script inside the loop in a moment of experimentation!

I've tried to put the script in the head.incl file and also outside the foreach loop. But it still doesn't work.

I'm sure I'm overlooking something that I will be embarrassed about! But at the moment, I don't know what it is.

Thanks,

Matthew

[Soma]

You code is now

<script type="text/javascript">
$(document).ready(function() {
 $('fancybox').fancybox({
   openEffect : 'none',
   closeEffect : 'none'
 });
});
</script>

But it should be

$('.fancybox').fancybox(...

[MatthewSchenker]

Hi Soma,

Thanks for helping... Unfortunately.. That was also something I tried in a moment of silly desperation.

Tried it both ways but it sill won't work. This is kind of strange.

Thanks,

Matthew

[diogo]

You linked to jQuery?

[MatthewSchenker]

Hello diogo,

Yes, I even included a link to Google's hosted version. I've also tested a few other JQuery scripts. I just can't seem to make JQuery work.

I know this sounds kind of silly, but is there anything unique about calling JQuery in PrcessWire?

Thanks,

Matthew

[Soma]

No there's nothing special about jQuery in PW. You do the output and include your script. PW does nothing.

You have to debug it on yourself. Usually you include first the css then the scripts. First jquery core then fancybox js. I've tested it in the console and fancybox script was present and I could call it in console. So either it's a conflict with fancybox and your jquery version or you did something wrong with your code. I remember when clicking an thumbnail it showed an error related to fancybox and jquery for a split second. But now the website has changed.

[MatthewSchenker]

Hi Soma,

Thanks, and I'm glad to know it must be something simple going wrong here.

Sorry I'm changing the site as we discuss this. I'm going to settle the one under discussion here and do my tests on another install so I don't cause confusion.

All right, I'm going to get a cup of coffee and then get into this again. I'm sure this has a solution.

Thanks,

Matthew

[interrobang]

I am too late to see what your page looked before, but now you are including 2 different versions of jquery:

line 18:

<script type="text/javascript" src="/~racc/site/templates/scripts/jquery-1.4.2.min.js"></script>

line 23:

<script src="http://code.jquery.com/jquery-latest.js"></script>

[MatthewSchenker]

Hello interrobang,

Thanks for helping! I appreciate everyone jumping in here.

Yes, I realize I'm not supposed to include both JQuery references. That was one of the ways I was trying to figure out where the problem was coming from.

I owe everyone here a favor!

Thanks,

Matthew

[MatthewSchenker]

Greetings,

Thank you again to everyone for helping! It turns out that adding JQuery to ProcessWire is definitely natural and straightforward -- as I assumed it had to be, since everything else works so naturally here!

I got my JQuery running properly on my test site now. To be honest, I don't know what was going wrong. I decided to just scrap all the files related to the script and start over... And this time it all worked.

Thanks again everyone,

Matthew