Proper formating for Javascript function?

  • 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

Viewing 15 replies - 1 through 15 (of 18 total)

  • 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.

    Thread Starter macart

    (@macart)

    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

    Thread Starter macart

    (@macart)

    Can someone help guide the noob out of his ignorance? Stuck!

    Thanks

    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.

    Thread Starter macart

    (@macart)

    Thanks I did miss that. But even with the change to

    $(function() {
	$(".jqzoom").jqzoom();
});

    It still doesnt work

    Thread Starter macart

    (@macart)

    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!

    Thread Starter macart

    (@macart)

    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>
    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    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.

    Thread Starter macart

    (@macart)

    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>

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    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?

    Thread Starter macart

    (@macart)

    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 https://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.

    Thread Starter macart

    (@macart)

    Anyone know what Im doing wrong please?

    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.

    Thread Starter macart

    (@macart)

    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

    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..

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Proper formating for Javascript function?’ is closed to new replies.