Home/ Questions/Q 6334281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T18:37:48+00:00

Here’s my <head> . <head> <title>@ViewBag.Title</title> <link href=@Url.Content(~/Content/Site.css) rel=stylesheet type=text/css /> <link href=’http://fonts.googleapis.com/css?family=Paytone+One’ rel=’stylesheet’

  • 0

Here’s my <head>.

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />    
    <link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css' />    
    <link href='http://fonts.googleapis.com/css?family=Coda+Caption:800' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="@Url.Content("~/Scripts/ddpowerzoomer.js")"  type="text/javascript"></script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) { //fire on DOM ready
            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        })

        $('#smallpictureone').click(function () {
            alert('Handler for .click() called.');
        });

        $('#smallpicturetwo').click(function () {
            alert('Handler for .click() called.');
        });

        $('#smallpicturethree').click(function () {
            alert('Handler for .click() called.');
        });

        $('#smallpicturefour').click(function () {
            alert('Handler for .click() called.');
        });

        $('#smallpicturefive').click(function () {
            alert('Handler for .click() called.');
        });

    </script>

</head>

And my HTML:

<div id="auctiondetails">
    <img id="mainproductpicture" src="../../Content/Images/product2.JPG" alt="test" />

    <img id="smallpictureone" src="../../Content/Images/product1.JPG" />
    <img id="smallpicturetwo" src="../../Content/Images/product2.JPG" />
    <img id="smallpicturethree" src="../../Content/Images/product3.JPG" />
    <img id="smallpicturefour" src="../../Content/Images/product4.JPG" />
    <img id="smallpicturefive" src="../../Content/Images/product5.JPG" />

</div>

When click any of the images that’s supposed to be wired for the event, nothing happens. Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re binding those click events outside of your DOMReady hook, so those elements don’t exist at that particular point in time.

    Move them inside, and you’ll be set:

    jQuery(document).ready(function ($) { //fire on DOM ready
    $('#mainproductpicture').addpowerzoom({
        defaultpower: 2,
        powerrange: [2, 5],
        largeimage: null,
        magnifiersize: [200, 200] //<--no comma following last option!
    });

    // Start binding events here...
})
    • 0