Hi Noob here,
Can someone please tell me how to properly format this javascript function to include in my functions.php file?
$(function() {
$(".jqzoom").jqzoom();
});Thank you
Proper formating for Javascript function? (19 posts)
-
macart
Posted 2 years ago # -
samjstarling
Posted 2 years ago #As it's a Javascript function (and not PHP) you need to include it in the HTML of your template, rather than in your functions.php file.
It also needs to go within <script> tags inside the <head> tags of your template - which you'll probably find in wp-content/themes/yourtheme/header.php.
For an example of how it's used 'in the wild' take a look at this example on the jQZoom pages.
-
Posted 2 years ago #Thanks for that.
I screwed something up, not working.
My header.php:
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.jqzoom-1.0.1.js"></script> <?php if (is_page("12")) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jqzoom.css" type="text/css" media="screen" /> <script type="text/javascript"> jQuery.noConflict(); $(document).ready(function(){ $('.MYCLASS).jqzoom(); }); </script>On my page:
<a href="images/kawasakigreen.jpg" class="jquery" title="Big"> <img src="images/kawasakigreen_small.jpg" title="Small" ></a>Thanks
-
Posted 2 years ago #Can someone help guide the noob out of his ignorance? Stuck!
Thanks
-
Posted 2 years ago #You've got
$('.MYCLASS).jqzoom(); ... <a ... class="jquery">You need to replace MYCLASS with the correct class name, and also close the quote you opened.
-
Posted 2 years ago #Thanks I did miss that. But even with the change to
$(function() { $(".jqzoom").jqzoom(); });It still doesnt work
-
Posted 2 years ago #And with the other change, still not working.
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jqzoom.pack.1.0.1.js"></script> <?php if (is_page("12")) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jqzoom.css" type="text/css" media="screen" /> <script type="text/javascript"> $(function() { $(".jqzoom").jqzoom(); }); </script>Ugh!
-
Posted 2 years ago #I think this is correct now, but still not working. Just a white line shows up on my page.
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jqzoom.pack.1.0.1.js"></script> <?php if (is_page("12")) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jqzoom.css" type="text/css" media="screen" /></script> <?php } ?> <script type="text/javascript"> $(function() { $(".jqzoom").jqzoom(); }); </script> -
Stop using $. Use the full jQuery with WordPress.
jQuery(function() { jQuery(".jqzoom").jqzoom(); });If you absolutely must use the $, then encapsulate it, like so:
jQuery(document).ready(function($) { // $() will work as an alias for jQuery() inside of this function $(function() { $(".jqzoom").jqzoom(); }); });Another way to do it, if you don't want to wait for the DOM ready event to fire is this:
(function($) { // your code here, use $ as much as you like })(jQuery);Basically, using $ is bad practice in general, because so many libraries decided to use it. WordPress loads jQuery in noConflict mode, so the $ doesn't get defined, in case some other library is using it. So use the full jQuery name whenever writing your own code and things tend to work better.
-
Posted 2 years ago #Thank you, that helps me in this learning process.
Still not working. I have an image, but nothing happens.
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jqzoom.pack.1.0.1.js"></script> <?php if (is_page("12")) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/jqzoom.css" type="text/css" media="screen" /></script> <?php } ?> <script type="text/javascript"> jQuery(function() { jQuery(".jqzoom").jqzoom(); }); </script> -
Are you on Page 12?
Are you sure you don't want to use
is_page(12)instead? Note the lack of quote marks.Do you get any errors in the browser's Error Console?
-
Posted 2 years ago #Thank you. Taking out the quote marks fixed my error. But still not working.
I now have an image in my page. When clicked it loads the larger image, my screen cursor is now the magnifying glass. Click, zooms in once, click again, zooms out.
Not getting the hover effect.
So after I studied your code and the code at http://www.mind-projects.it/projects/jqzoom/,I thought this is what I needed.
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.jqzoom1.0.1.js"></script> <?php if (is_page(12)) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/jqzoom.css" type="text/css" media="screen" /></script> <?php } ?> <script type="text/javascript"> jQuery(document).ready(function($) { var options = { zoomWidth: 300, zoomHeight: 250, xOffset: 10, yOffset: 0, position: "right" //and MORE OPTIONS }; ('.jqzoom).jqzoom(options); }); </script>But still no joy.
-
Posted 2 years ago #Anyone know what Im doing wrong please?
-
Mark / t31os
Posted 2 years ago #Does you link have jqzoom as it's class name, since that's what the function is expecting it to be now..
It might be appropriate to name it something else, you're giving it the same name as a function (confusing for anyone reading it if they're not immediately familiar with the code)..
('.myclassname').jqzoom(options);You're also missing the second quote, which i've added back into the example above.
-
Posted 2 years ago #Thank you. I named my class "zoomer" to try an make it a little clearer. I have an image on my page with hand icon, when I hover over the image its supposed to load a box to the right with a zoomed portion of the smaller image, it doesn't do that. If I click the image it loads the same image but with a magnifying glass for the icon. Here is my code.
On my page:
<a href="mysite/wp-content/themes/myTheme/images/kawasakigreen.jpg" class="zoomer" title="Big"> <img src="mysite/wp-content/themes/myTheme/image/kawasakigreen_small.jpg" title="Small" ></a>In my header:
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>mysite/wp-content/themes/mytheme/jquery.jqzoom1.0.1.js"></script> <?php if (is_page(12)) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>mysite/wp-content/themes/mytheme/jqzoom.css" type="text/css" media="screen" /></script> <?php } ?> <script type="text/javascript"> jQuery(document).ready(function($) { var options = { zoomWidth: 300, zoomHeight: 250, xOffset: 10, yOffset: 0, position: "right" //and MORE OPTIONS }; ('.zoomer').jqzoom(options); }); </script>Thanks
-
Posted 2 years ago #This
('.zoomer').jqzoom(options);Should be..
$('.zoomer').jqzoom(options);.. don't know why i ignored the obvious error before.. lol ... it must be getting late..
-
Posted 2 years ago #Thanks for that. Still no hover effect.
Is there some reason that JQZOOM doesnt work with wordpress?
Anyone get this to work in WordPress?Thanks
-
And macart, we can't debug magic code without seeing the actual site. Show us what's broken. Give us a URL. Then somebody might be able to actually help you.
-
evdboogaard
Posted 2 years ago #Thanks Otto42!
Macart, I have it working with WordPress MU 2.9
thanks to Otto42's suggestion:
jQuery(document).ready(function($) { // $() will work as an alias for jQuery() inside of this function $(function() { $(".jqzoom").jqzoom(); }); });I suggest you check your paths too, make sure everything is loaded correctly.
Topic Closed
This topic has been closed to new replies.
