Can't get Galleria enqueue script to work WordPress
- SOLVED
I have the Galleria Twelve theme [[LINK href="http://galleria.aino.se/themes/"]]http://galleria.aino.se/themes/[[/LINK]]
When I have Galleria outside of WordPress ([[LINK href="http://tourkick.com/demo/"]]http://tourkick.com/demo/[[/LINK]]) and use the Galleria's documentation for implementing Galleria and JQuery, I don't have issues on the iPad.
But when inside WordPress ([[LINK href="http://tourkick.com/tours/20110715-2136-east-22nd-place-tulsa-ok-74114-2/"]]http://tourkick.com/tours/20110715-2136-east-22nd-place-tulsa-ok-74114-2/[[/LINK]]), the iPad struggles with Galleria's documented implementation instructions. Thus, I thought I'd use the [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]wp_enqueue_script[[/LINK]] solution.
In the header.php, I have tried this code, but it didn't work (even with:
<?php // Galleria Photo Display
// <!-- load jQuery -->
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', '/js/galleria/galleria-1.2.4.min.js', 'jquery'); //edited on WPQs - removed last comma at the end from passing other arguments in prior testing
wp_enqueue_script('galleria');
?>
The code below is from this plugin: [[LINK href="http://wordpress.org/extend/plugins/galleria-wp/"]]http://wordpress.org/extend/plugins/galleria-wp/[[/LINK]]
//============================== Javascript Loader ==========================//
//add_action( 'get_header', 'galleria_wp_load_js', 30);
function galleria_wp_load_js() {
$galleria_wp_plugin_path =
get_option('siteurl')."/wp-content/plugins/galleria-wp";
wp_enqueue_script('jquery'); // path : '/wp-includes/js/jquery/jquery.js'
wp_enqueue_script('jcarousel',
$galleria_wp_plugin_path .'/js/jquery.jcarousel.js',
array('jquery'));
wp_enqueue_script('galleria',
$galleria_wp_plugin_path .'/js/jquery.galleria.js',
array('jquery'));
}
I don't know why the enqueue isn't working, but I REALLY want to use Galleria within WordPress with custom fields. ANY tips will be appreciated.
***UPDATED 2011-07-31 at 12:30 Central Time***
I added a link to the most current version of my referenced files (.zip file download), in case it will help... I will not be granting FTP access, however. Thank you for your assistance.
By accessing this download, you agree the files and the code within are Confidential and Proprietary. You will not share or use. You will not share this download link or the files with anyone else, ever. You will destroy all versions of the files immediately once work on them has concluded, as determined by the closing of the question on WP Questions. If you do not agree, do not download this file.
<strong>LINK REMOVED</strong>
Answers (7)
Christianto answers:
Hi Cliff,
<strong>First</strong>, in footer there are jQuery conflict error for initializing galleria.
// Initialize Galleria
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
If you can edit it, change "$" to "jQuery" or put it inside jQuery ready method by passing $ to the function..
// Initialize Galleria
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
<strong>second</strong>, please check if galleria theme and css are in right path, its return error "could not load theme at /js/galleria/themes/twelve/galleria.twelve.min.js"
looking at the message, I think the theme and css should be placed on /js/galleria/themes/twelve/
Let we see if fixing above will make it work..
Clifford P comments:
I like the direction you're headed...
My new code in the footer:
<?php // Galleria Photo Display
// Initialize Galleria
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
?>
The page then returns this error:
<blockquote>Parse error: syntax error, unexpected T_FUNCTION, expecting ')' in /.../footer-branded.php on line 27</blockquote>
Line 27 is this line:
jQuery(document).ready(function($){
However, the page still loads everything else, just with writing that error on the page...
How do you detect the jQuery conflict - Firebug? How?
Thanks.
Christianto comments:
Its php syntax error, maybe you could paste your entire code to pastebin.com?
I'm using webkit base browser, their web inspector ;)
Christianto comments:
I just realized it if you paste it on footer with php tag you should use
<?php
// Galleria Photo Display
// Initialize Galleria
echo "
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
";
?>
Christianto comments:
About wp_enqueue_script try to put it on wp_head hook..
add_action('wp_head', 'headLoadJS', 0);
function headLoadJS() {
// here wp_enqueue_script() code
}
Be sure to have wp_head(); on your header.
Christianto comments:
Or if it above failed use on init hook
add_action('init', 'headLoadJS');
function headLoadJS() {
if(!is_admin()){
// here wp_enqueue_script() code
}
}
Clifford P comments:
This is not correct:
echo "
// code here
"
However, I am interested in your last 2 replies. Where would I put those snippets -the theme's functions.php?
And please put the entire code, just so I can be sure (i.e. not the "// here wp_enqueue...")
Thanks.
Christianto comments:
<blockquote>
This is not correct:
echo "
// code here
"</blockquote>
Because you're using inside <strong>php tag (<?php ?>) </strong> then it's should be echo, from the code you're posted below is not correct..
<?php
// Galleria Photo Display
// Initialize Galleria
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
?>
Anyway, yes the hook will be placed in functions.php
add_action('wp_head', 'headLoadJS', 0);
function headLoadJS() {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', get_template_directory_uri().'/js/galleria/galleria-1.2.4.min.js', 'jquery'); //edited on WPQs - removed last comma at the end from passing other arguments in prior testing
wp_enqueue_script('galleria');
}
Clifford P comments:
I have created a "js" directory in the theme's folder, and I have added Galleria's js files to the theme's "js" directory. And this has been added to my theme's functions.php:
function headLoadJS() {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', 'http://tourkick.com/js/galleria/galleria-1.2.4.min.js', 'jquery');
wp_enqueue_script('galleria');
}
add_action('wp_head', 'headLoadJS', 0);
And the new footer-branded.php file has this right before the closing </body> tag:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
</script>
And, if you visit the sample page again, you'll see it's still not working.
P.S. Regarding the PHP echo, maybe I was wrong - don't know - but it wasn't working. No offense intended. Can't tell if you took it that way. Sorry.
Clifford P comments:
Woops, I meant this was my functions.php code:
function headLoadJS() {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', get_template_directory_uri().'/js/galleria/galleria-1.2.4.min.js', 'jquery');
wp_enqueue_script('galleria');
}
add_action('wp_head', 'headLoadJS', 0);
Christianto comments:
Pretty weird on your site, I run it on my localhost and it work with wp_head hook.
Ok lets try with init hook..
replace the code on functions.php with
function headLoadJS() {
if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', get_template_directory_uri().'/js/galleria/galleria-1.2.4.min.js', 'jquery');
wp_enqueue_script('galleria');
}
}
add_action('init', 'headLoadJS');
I test it on my localhost, it run same with code before but let we see if it work by this way.
Clifford P comments:
Since this is one testing page of the site, my new functions.php code is this:
function headLoadJS() {
if(!is_admin() && 829==$post->ID){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', get_template_directory_uri().'/js/galleria/galleria-1.2.4.min.js', 'jquery');
wp_enqueue_script('galleria');
}
}
add_action('init', 'headLoadJS');
That didn't work either -- before or after I added the Post ID part.
If you got it to work then what could cause mine not to work? Are there any more conflicts or anything to discover?
Christianto comments:
Did you run wp_head in your theme header?
<?php wp_head(); ?>
I'm just checking if its exists in your theme..
And about the $post->ID you should declare global $post inside the function, but I doubt wp_query its already initialize in that action (init hook) so it will return nothing (global $post is still empty) cmiiw.
So I guess we should try it without additional condition statement, just !is_admin()
Christianto comments:
Cliff, In your respond to Daryl about js error, I check your site, the script still didn't loaded properly so the galleria function aren't define yet.
I read [[LINK href="http://themeforest.net/forums/thread/help-with-wp_enqueue_script/48106?page=1"]]this thread[[/LINK]], the guy who posted on the thread has the same problem with you.
So instead hook it on "wp_head" or "init" action, he uses "wp_enqueue_scripts".
the hook exists but isn't documented on [[LINK href="http://codex.wordpress.org/Plugin_API/Action_Reference"]]action reference[[/LINK]]
so maybe you could try it if it work.
the code will become..
add_action('wp_enqueue_scripts', 'headLoadJS');
function headLoadJS() {
if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, '', false);
wp_enqueue_script('jquery');
// <!-- load Galleria -->
wp_deregister_script('galleria');
wp_register_script('galleria', get_template_directory_uri().'/js/galleria/galleria-1.2.4.min.js', 'jquery');
wp_enqueue_script('galleria');
}
}
Clifford P comments:
Everything seems to work, but I had to comment out the functions.php part that makes this page work - because it makes the rest of the site not work (i.e. pictures are all gone).
Daryl's going to Skype me in 3 hours to finalize this last bit of code wrangling and I'll post the final version here for all. Thanks for checking in.
Daryl Lozupone answers:
Cliff---
You must wrap the script inside a script tag, like so:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
</script>
That is why it is just displaying in your footer as of right now. The browser thinks it is merely text for the page.
In response to your question to Christianto, Wordpress requires you to use jQuery in no confilct mode (which means you cannot use $ to indicate jQuery). It is documented here: [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers"]]jQuery noConflict wrappers[[/LINK]].
I hope that helps.
Clifford P comments:
For now, I took out the PHP, just to simplify things...
Here's my new code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
</script>
There aren't any errors or stray text visible on the page, but it's still not working.
Daryl Lozupone comments:
Cliff--
The current version of your page has a syntax error in the footer javascript. It has the last line as a parentheses curly brace, when it should be reversed.
The correct javascript is as follows:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
</script>
However the galleria js is not being loaded. It was when I posted my previous answer yesterday. In order to load the galleria script, you can add the following to your functions.php:
function myfunction_galleria_script_init() {
wp_register_script( 'galleria', get_bloginfo( 'template_url' ) . '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
}
add_action( 'wp_print_scripts', 'myfunction_galleria_script_init' );
In the above example, I suggest using the 'myfunction' prefix to avoid namespace issues. You want to be sure your function does not carry the same name as another function from your theme or a plugin, so always use some unique string that is unlikely to be used by others.
Second, it assumes the galleria js is located in a subdirectory of your theme folder named 'js'.
Also, you need to enclose the dependencies in an array. So, for the third parameter of the wp_register_script function, you should use array( 'jquery' ) instead of just 'jquery'.
With all of that being said, I suggest first getting the enqueue to work. Then debug the javascript errors that prevent the galleria from working.
Daryl Lozupone comments:
Forgot to mention--
[[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Usage"]]From the Wordpress codex:[[/LINK]]
<blockquote>
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Use the wp_enqueue_scripts action to call this function, or admin_enqueue_scripts to call it on the admin side. Calling it outside of an action can lead to troubles.</blockquote>
Daryl Lozupone comments:
Cliff--
Your javascript at the bottom of the page is correct. The following error message comes up now:
<em><strong>Uncaught TypeError: Object [object Object] has no method 'galleria'</strong></em>
So the script at the bottom is parsing correctly.
May I suggest that you put the function to enqueue the scripts back in the page? I will take a look and see what is going on.
If the thumbnails all disappeared, then you are on the right track. At this moment, I would recommend not worrying about conditionals (i.e. !is_admin && $post->ID == 829). Once it works, you can begin to add more complexities.
Clifford P comments:
My code is now
function myfunction_galleria_script_init() {
/* if(!is_admin() && 829==$post->ID){ */
wp_register_script( 'galleria', get_bloginfo( 'template_url' ) . '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
/* } */
}
add_action( 'wp_print_scripts', 'myfunction_galleria_script_init' );
However, that means the rest of the site isn't working either (photo displays are entirely gone across the entire site instead of just this page). It's not the end of the world if it gets resolved quickly. Thanks.
Daryl Lozupone comments:
Cliff--
I have grabbed a copy of your html with the galleria js loaded. I will take a look here and get you an answer.
Daryl Lozupone comments:
Cliff--
The galleria theme is not specified. In the footer js (assuming you are using the classic theme which you have uploaded to your theme directory) :
jQuery(document).ready(function(){
Galleria.loadTheme('/wp-content/themes/clean-home-cliff/js/galleria/themes/classic/galleria.classic.js');
jQuery('#gallery').galleria({
debug:false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
I have a working example on my site at the following URL:
[[LINK href="http://test.renegadetechconsulting.com/galleria-test"]]http://test.renegadetechconsulting.com/galleria-test[[/LINK]]
It is using the js from your site with the theme uploaded to mine.
Daryl Lozupone comments:
Cliff--
And here is a working example of your page html:
[[LINK href="http://test.renegadetechconsulting.com/galleria-test.html"]]http://test.renegadetechconsulting.com/galleria-test.html[[/LINK]]
Clifford P comments:
I saw your testing site. That's using the Galleria Classic theme.
Here's the new code I have for [[LINK href="http://tourkick.com/tours/20110715-2136-east-22nd-place-tulsa-ok-74114-2/"]]http://tourkick.com/tours/20110715-2136-east-22nd-place-tulsa-ok-74114-2/[[/LINK]]:
functions.php:
function myfunction_galleria_script_init() {
/* if(!is_admin() && 829==$post->ID){ */
wp_register_script( 'galleria', '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
/* } */
}
add_action( 'wp_print_scripts', 'myfunction_galleria_script_init' );
footer-branded.php:
<script type="text/javascript">
jQuery(document).ready(function(){
Galleria.loadTheme('/js/galleria/themes/twelve/galleria.twelve.min.js');
jQuery('#gallery').galleria({
debug:false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
}); </script>
</body>
I don't see it working on my site. Do you?
Clifford P comments:
But at least the thumbnails are back...
And I tried ...galleria.classic.min.js' instead and that didn't work either.
If you want to do screen sharing I can now. Message me if yes.
Daryl Lozupone comments:
Cliff--
Change the footer script from
jQuery('#gallery').galleria({
to
jQuery('#galleria').galleria({
That should do it.
Daryl Lozupone comments:
Cliff--
Looks like it works ;)
Clifford P comments:
Yeah! :)
THIS WORKS (and iPad didn't suffer loading the page anymore)...
functions.php:
function myfunction_galleria_script_init() {
if(!is_admin()){
wp_register_script( 'galleria', '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
}
}
add_action( 'init', 'myfunction_galleria_script_init' );
footer:
<script type="text/javascript">
jQuery(document).ready(function(){
Galleria.loadTheme('/js/galleria/themes/twelve/galleria.twelve.min.js');
jQuery('#galleria').galleria({
debug:false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
}); </script>
Questions:
1) Since the functions.php didn't enqueue jQuery from Google, how is Galleria still working if it's dependent on jQuery? Is the current setup the best or should I enqueue Google's jQuery in addition?
2) I changed 'wp_print_scripts' to 'init' because [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Example"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Example[[/LINK]] says Do Not Use wp_print_scripts. Should I use 'init' or 'wp_head' ? Why?
3) How can I get some code like this to work? Right now there's an error on the line starting "(global..."
function myfunction_galleria_script_init() {
// if not in Admin screens AND (either tko_photos_branded_galleria or tko_photos_unbranded_galleria custom field is NOT NULL)
if(!is_admin() &&
(global $wp_query; $postID = $wp_query->post->ID; echo get_post_meta($postID, 'tko_photos_branded_galleria', true);
||
global $wp_query; $postID = $wp_query->post->ID; echo get_post_meta($postID, 'tko_photos_unbranded_galleria', true);
)
){
wp_register_script( 'galleria', '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
}
}
add_action( 'init', 'myfunction_galleria_script_init' );
4) Is the footer <script>galleria stuff</script> still WordPress best practice? I'm guessing yes because it's in that no-conflict jQuery wrapper thing, but I just wanted to verify.
Daryl Lozupone comments:
Questions:
<blockquote>1) Since the functions.php didn't enqueue jQuery from Google, how is Galleria still working if it's dependent on jQuery? Is the current setup the best or should I enqueue Google's jQuery in addition?</blockquote>
WordPress loads the local jQuery because you tell it you need jQuery for galleria to work. This is done in the third parameter of the 'wp_enqueue_script' function.
If you wish to use Google's jQuery, you will have to de-register the jQuery that ships with WordPress and then register the Google version. See the code example at the end of this reply.
<blockquote>2) I changed 'wp_print_scripts' to 'init' because http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Example says Do Not Use wp_print_scripts. Should I use 'init' or 'wp_head' ? Why?</blockquote>
You should use init because wp_head runs too late in the process.
<blockquote>3) How can I get some code like this to work? Right now there's an error on the line starting "(global..."</blockquote>
See code example at the end of this reply.
<blockquote>4) Is the footer <script>galleria stuff</script> still WordPress best practice? I'm guessing yes because it's in that no-conflict jQuery wrapper thing, but I just wanted to verify.</blockquote>
I find it best to always use the 'jQuery' instead of the '$' inside wordpress. I find it is easier to read and follow.
That being said you can do as follows:
jQuery( document ).ready( function( $ ) {
// $() will work as an alias for jQuery() inside of this function
});
So, here is the final code sample incorporating all of your questions:
function myfunction_galleria_script_init( $posts ) {
//step through each post to test for presence of custom fields
foreach( $posts as $post ) {
//Conditional statements:
// if not in Admin screens AND (either tko_photos_branded_galleria or tko_photos_unbranded_galleria custom field is NOT NULL
// CLIFF--- If the value is not set, WP returns an empty string, so test for that
//Get the values of the custom fields
$sBranded = get_post_meta( $post->ID, 'tko_photos_branded_galleria', true );
$sUnbranded = get_post_meta( $post->ID, 'tko_photos_unbranded_galleria', true );
if( !is_admin() && ( ($sBranded) != '' || $sUnbranded != '' ) ) {
//This is not an admin page AND either tko_photos_branded_galleria or tko_photos_unbranded_galleria is filled out for the post, so we enqueue the script
wp_enqueue_script( 'galleria' );
//The following statement takes us out of the foreach loop. Since we found we need to enqueue the script for at least one post on this page, we do not need to cycle through all of them
break;
}
}
}
add_action( 'the_posts', 'myfunction_galleria_script_init' );
//The following function will register all of the scripts necessary
function myfunction_galleria_script_register() {
//The next four lines are not necessary !!! Only use if you wish to use Google's jQuery
//remove jQuery version included with WordPress
wp_deregister_script( 'jquery' );
//Use Google version instead
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
//End of optional section
//Register Galleria
wp_register_script( 'galleria', get_bloginfo( 'template_url' ) . '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
}
add_action( 'init', 'myfunction_galleria_script_register')
Daryl Lozupone comments:
Cliff--
My apologies. I left out one line.
So here is the final:
<?php
function myfunction_galleria_script_init( $posts ) {
//step through each post to test for presence of custom fields
foreach( $posts as $post ) {
//Conditional statements:
// if not in Admin screens AND (either tko_photos_branded_galleria or tko_photos_unbranded_galleria custom field is NOT NULL
// CLIFF--- If the value is not set, WP returns an empty string, so test for that
//Get the values of the custom fields
$sBranded = get_post_meta( $post->ID, 'tko_photos_branded_galleria', true );
$sUnbranded = get_post_meta( $post->ID, 'tko_photos_unbranded_galleria', true );
if( !is_admin() && ( ($sBranded) != '' || $sUnbranded != '' ) ) {
//This is not an admin page AND either tko_photos_branded_galleria or tko_photos_unbranded_galleria is filled out for the post, so we enqueue the script
wp_enqueue_script( 'galleria' );
//The following statement takes us out of the foreach loop. Since we found we need to enqueue the script for at least one post on this page, we do not need to cycle through all of them
break;
}
}
return $posts;
}
add_action( 'the_posts', 'myfunction_galleria_script_init' );
function myfunction_galleria_script_register() {
//The next four lines are not necessary !!! Only use if you wish to use Google's jQuery
//remove jQuery version included with WordPress
wp_deregister_script( 'jquery' );
//Use Google version instead
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
//End of optional section
//Register Galleria
wp_register_script( 'galleria', get_bloginfo( 'template_url' ) . '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
}
add_action( 'init', 'myfunction_galleria_script_register')
?>
Clifford P comments:
I get an error on the next function after this one. But if I comment all of this out, no error.
And if this function wants Galleria js to be in the theme folder, the footer needs to as well. So this is my new footer code... just FYI...
<!-- load in noConflict mode - http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers -->
<script type="text/javascript">
jQuery(document).ready(function(){
Galleria.loadTheme('<?php echo get_bloginfo( 'template_url' );?>/js/galleria/themes/twelve/galleria.twelve.min.js');
jQuery('#galleria').galleria({
debug:false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
});
</script>
Clifford P comments:
Daryl Skyped me. All that was missing was the last semi-colon at the end of Daryl's code. THANK GOD this is finally over. Thanks to all who participated. Your efforts were appreciated.
Navjot Singh answers:
Try using absolute path to galleria script in header.php instead of relative path.
Clifford P comments:
no difference.
Navjot Singh comments:
Try using this plugin: [[LINK href="http://wordpress.org/extend/plugins/photo-galleria/"]]Photo Galleria[[/LINK]]
Clifford P comments:
That's the same Galleria, except it's the free "Classic" theme. I purchased the full-featured "Twelve" theme. Plus, I am not interested in a plugin if I can do without, and I need to pull images from outside my wordpress installation.
How do you use Firebug to see if there are any conflicting JavaScript/JQuery items? My Firebug doesn't show any Errors.
Or are there other issues/reasons why it might not work?
Navjot Singh comments:
Earlier your wordpress page was showing fine on Desktop but it seems to be broken now. Btw, checked this page at Galleria support forums? Other users also seem to be facing some issues with [[LINK href="http://getsatisfaction.com/galleria/topics/twelve_theme_ipad_testing_feedback"]]Twelve Theme on Ipad[[/LINK]].
Clifford P comments:
Yes, I'm still messing with the code as we go along... After I initially posted this question, I went back to using the <script></script> code directly from Galleria documentation.
Step 1: enqueue script and get no JavaScript or jQuery errors so it works right on desktop view
Step 2: test on iPad
That GetSatisfaction post you linked to does probably describe my issue accurately - i.e. iPad viewing isn't ideal, but it does work (i.e. doesn't break) - I figure it can only improve if I get Galleria enqueued correctly.
Thanks.
Navjot Singh comments:
Just noticed that there is an error in footer php file as well. Can you mail me your FTP and Wordpress login via my profile page and I will take a look at the enqueue problem?
Julio Potier answers:
Hello
Try this :
wp_enqueue_script( 'galleria', plugins_url( 'js/jquery.galleria.js', __FILE__ ) , array( 'jquery' ), $wp_version, true );
And also, can you try to load this .js file in the url bar ?
See you !
Clifford P comments:
1) I'm not using a plugin. Should I still try that code?
2) If I put "http://tourkick.com/js/galleria/galleria-1.2.4.min.js" in the address bar of my browser and press enter, it asks me to download the file. Is that what you wanted me to test?
Reland Pigte answers:
Instruction to make your galleria work:
1. Upload the galleria them to your template directory
eg. the "classic" folder
2. Upload the "galleria-1.2.4.min.js" to your template directory file inside js forlder
3. Insert this code to the header.php file underneath wp_head()
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/galleria-1.2.4.min.js"></script>
4. On the footer of you template underneath wp_footer(), insert this script
<script type="text/javascript">
(function($){
// Load the classic theme
Galleria.loadTheme('<?php bloginfo('template_url'); ?>/classic/galleria.classic.min.js');
// Initialize Galleria
$('#galleria').galleria();
})(jQuery);
</script>
Clifford P comments:
This is similar to what I already have gotten to work. However, it's not using the WordPress enqueue script, which means it's not the right way to do it.
Reland Pigte comments:
Hi Cliff,
function galleria_script_init() {
wp_register_script( 'galleria', get_bloginfo('template_url').'/js/galleria-1.2.4.min.js');
wp_enqueue_script( 'galleria' );
}
add_action( 'wp_print_scripts', 'galleria_script_init' );
Try adding that one on function.php
For the footer script this is the script to avoid the conflicts of jquery
<script type="text/javascript">
(function($){
Galleria.loadTheme('<?php bloginfo('template_url'); ?>/classic/galleria.classic.min.js');
$('#galleria').galleria({
debug:false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
})(jQuery);
</script>
Clifford P comments:
I tried this:
function myfunction_galleria_script_init() {
wp_register_script( 'galleria', get_bloginfo( 'template_url' ) . '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
}
add_action( 'wp_print_scripts', 'myfunction_galleria_script_init' );
And the Photo thumbnails were entirely gone... which means it did SOMETHING. :)
Then I tried this:
function myfunction_galleria_script_init() {
if(!is_admin() && 829==$post->ID){
wp_register_script( 'galleria', get_bloginfo( 'template_url' ) . '/js/galleria/galleria-1.2.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'galleria' );
}}
add_action( 'wp_print_scripts', 'myfunction_galleria_script_init' );
And the thumbnails were there again... which probably means Christianto was right that I'm not doing the postID=829 correctly...
Clifford P comments:
Woops, that reply was in regards to Daryl's last post...
I don't like WPQ's "reply" mechanism... it's hard to scroll vertically so long... There should be a "reply" under every message. Oh well...
Reland Pigte comments:
so, it's all working now? :)
Clifford P comments:
No, but I think Daryl's last function was getting the closest, since it actually did something. Dunno though.
Reland Pigte comments:
I think Daryl just changed my function name from galleria_script_init to myfunction_galleria_script_init as you can see on the time and date posted.. :)
But, glad to know it's getting closer
Cheers mate
Peter Michael answers:
You still have a syntax error in your JavaScript in the footer. Here's the fixed one:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#galleria').galleria({
debug:false,
// showInfo: false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
)};
</script>
Clifford P comments:
Thanks. fixed. Still not the solution - posted update to Christianto.
Romel Apuya answers:
i think your loading the noConflict wrongly?
How about trying this one..
<script type="text/javascript">
var $j= jQuery.noConflict();
$j(document).ready(function(){
Galleria.loadTheme('/js/galleria/themes/twelve/galleria.twelve.min.js');
$j('#galleria').galleria({
debug:false,
width: 880,
height: 630,
imageCrop: false,
thumbCrop: false,
thumbQuality: true
});
}); </script>