Integrating JQuery with WordPress, Galleriffic slideshow troubleshoot

Resolved jupiter76
(@jupiter76)

14 years, 1 month ago

Hello. I’m working with the Galleriffic 2.0 Jquery photo gallery to make a lot of slideshows. I’ve gotten it working on a regular html site just great, but I cannot seem to get it working on a WordPress site. Google searches have proved fruitless for documentation on integrating Jquery with WordPress, specifically for this plugin. It seems to be a popular Jquery script, so I’m sure someone has tried to integrate it with WordPress before.

I’m currently setting up the files like thus:
in the header.php:
I put this script code between the meta tags and the css tag:
(I’ve taken the greater and less than signs out so it displays the code here in the thread)
?php wp_enqueue_script(‘jquery’); ?
<script type=”text/javascript” src=”/scripts/jquery.galleriffic.js”>
<script type=”text/javascript” src=”/scripts/jquery.history.js”>
<script type=”text/javascript” src=”/scripts/jquery.opacityrollover.js”>

Then in my regular index page, I have the content divs containing the photo gallery.

Finally, in the footer.php, I have added right before the tag:
script type=”text/javascript”
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$(’div.navigation’).css({’width’ : ‘300px’, ‘float’ : ‘left’});
$(’div.content’).css(’display’, ‘block’);
…… –and on til the closing script tag.

This does not work. I’m unsure of the correct procedure for WordPress to display this correctly. I added the css of galleriffic to my own style sheet, because I didn’t understand how to get WordPress to load an additional css file. Viewing the page source does show the javascripts were loaded. I also tried adding the actual photo gallery content divs into a Page from the WordPress admin, but that proved fruitless too. I also do not know in what exact folder WordPress expects my thumbnail and regular size images for this gallery to be. I could upload them all one by one from the WordPress admin, but since I am working locally via Mamp, it would seem easier to just put the images in the right folder. But what folder would that be?

Any help on integrating Jquery with WordPress would be greatly appreciated. I’ve hit a brick wall with this and imagine someone has encountered this problem before. Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)

Rev. Voodoo
(@rvoodoo)

14 years, 1 month ago

well…when you say content divs in index…you mean you’ve hardcoded content into index.php?

like….does your js scripts call the photos, or do you have to hardcode them into index.php?

If it’s in the js, you point that to the images. If it’s in the index.php…..you just have to code to the photos properly like:

<img src="<?php bloginfo('template_url'); ?>/photos/images.png" width="114" height="111" alt="title" />
(This assumes you load all pics to a folder called photos within your theme)

in your header…do you close the scripts you call?

<script type="text/javascript" src="/scripts/jquery.galleriffic.js”></script>

admittedly, I know nothing about the script you are trying to run, just trying to drop some generic science

Also, on here, if you use the code button, or post between backtics (just under Esc on american keyboard) your code will appear safely

Thread Starter jupiter76
(@jupiter76)

14 years, 1 month ago

Thanks, RVoodoo. I am hard coding the images into the index.php page, and did not know how to call the images, so that WordPress would find them. I will definitely try it using the php bloginfo code you mentioned to call the images, and see if that takes care of the problem. And yes, I have been closing the scripts. I realize the thread here did not print that out, – Thanks for letting me know about the code button! I am admittedly new to coding WordPress sites, but it would be really awesome if I can get this to work.

I’ll try again, and let you know how it goes!!
Thread Starter jupiter76
(@jupiter76)

14 years, 1 month ago
Yippee!! I got it running!!! I figured out what was wrong, and of course it was so simple. My biggest problem was calling other javascripts before the wp_head tag! It should have been after – like this:
```
<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"); type="text/css" media="screen" />
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/scripts/jquery.galleriffic.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/scripts/jquery.history.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/scripts/jquery.opacityrollover.js"></script>
```
Calling the images using the bloginfo tag was also a huge lifesaver. Thanks so much for the tip, RVoodoo! I am majorly relieved right now!
swan088
(@swan088)

14 years, 1 month ago

Hi jupiter76, i’ve been searching for ages on integrating galleriffic into wordpress and was glad to find your posts. Is your site up online somewhere? i would love to check it out.

Thread Starter jupiter76
(@jupiter76)

14 years, 1 month ago

I will pass it along when it’s online. Right now, I’m still working out the kinks. I got galleriffic working but now I’m having problems getting flvs and swfs on the site, without a plugin.

Thread Starter jupiter76
(@jupiter76)

14 years ago

The site I was working on is now online at http://www.flamingmedusa.com/gallery/illustration.

Check out the slideshows there to see galleriffic working with WordPress.

marcy_sss
(@marcy_sss)

13 years, 11 months ago

I’m so stoked to see that you got this working, I love Galleriffic for image display! I plan on implementing it on a WordPress site soon. I find it really irritating that there don’t seem to be any WordPress galleries that don’t rely on Lightbox or a heavy-handed app like Gallery2. I have demo’ed almost ALL of them, and they all have horrible user experience, hideous design or both. Just give me thumbnails, captions, and a clickthrough without reloading the page! And NO Lightbox!

calicosun
(@calicosun)

13 years, 8 months ago

Hi Jupiter76

You mentioned you hard coded the images. Did you figure out how to integrate the script to enable the images to be uploaded via word press by any chance?

I am not very experienced with scripts so gave up trying to figure it out. Disappointing as so far Galleriffic seems to be the best gallery script – fast, light and very cross browser compatible.

Thanks!

leandro.figueiredo
(@leandrofigueiredo)

13 years, 8 months ago

Hi jupiter76,

I could not do the integration.
If you can.
You can post the step by step?
With details.

Thanks

Thread Starter jupiter76
(@jupiter76)

13 years, 7 months ago

Caliosun, sorry I have not looked into uploading the images via the wordpress admin area. Being that I had a large amount of images to work with, it was a lot more efficient to hard-code the images into the page.

Leandro, Galleriffic publishes a step by step with the code online:
http://www.twospy.com/galleriffic/

The biggest changes to get it to work with WordPress are to add the call to scripts to the header as referenced in an above post, and to call the images in the correct way (also addressed above).

Seb Syd
(@seb-syd-1)

13 years, 6 months ago

jupiter76 and everyone,
Thanks for your help with Galleriffic.
This WordPress Plugin for Galleriffic works:-

PHOTOSPACE
louiserouse
(@louiserouse)

13 years, 2 months ago
I also got it to work by calling
```
<script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/js/jquery.history.js"></script>
<script type="text/javascript" src="/js/jquery.opacityrollover.js"></script>
```
AFTER
<?php wp_head(); ?>

Thanks!