CODEWITHSUNDEEP
imagejqueryloaderpreloader
Davis
Davis

Reputation: 3017

Simplifying Jquery

I'm trying my hardest to simplifying the code below....

You'll see there's 3 different images that triggers to the large image, I guess you can call it as click-able slideshow. I would like to add a preloaded image when the user clicks the image.

Also, keep in mind there's a 2,3,4 batch just like this. I would like make this clean and light as possible.

Any thoughts?

<html>
<head>
<style type="text/css" media="screen">
#loader.loading {
    background: url(http://jqueryfordesigners.com/images/spinner.gif) no-repeat center center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#ml-games-collection .game1-btn").click(function () {
        $("#ml-display li.game").removeClass("hide").css("display", "none");
        $("#ml-display .game1").show();
    });

    $("#ml-display .game1-ss1 img").bind("click", function () {
        $("#ml-display .game1-large-display").attr({
            "alt": "img alt 1 - screenshot 1",
            "src": "image 1"
        });
    });
    $("#ml-display .game1-ss2 img").bind("click", function () {
        $("#ml-display .game1-large-display").attr({
            "alt": "img alt 2 - screenshot 1",
            "src": "image 2"
        });
    });
    $("#ml-display .game1-ss3 img").bind("click", function () {
        $("#ml-display .game1-large-display").attr({
            "alt": "img alt 3 - screenshot 1",
            "src": "image 3"
        });
    });



</script>
</head>

<body>
<div class="column span-20 last game" id="ml-display">
  <ul style="padding-bottom:0;" class="game-list  no-list-style">
    <li class="game1 game" style=""> 
     <div id="loader" class="loading">
    <img width="500" height="313" alt="img alt 2 - screenshot 1" src="" class="game1-large-display right">
      <ul class="screen-shots no-list-style">
        <li><a title="" class="game1-ss1 click"><img alt=" Tiny Screen Shot" src=""></a></li>
        <li><a title="" class="game1-ss2 click"><img alt=" Tiny Screen Shot" src=""></a></li>
        <li><a title="" class="game1-ss3 click"><img alt=" Tiny Screen Shot" src=""></a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Upvotes: 0

Views: 149

Answers (1)

N3dst4
N3dst4

Reputation: 6435

Wrap each image an 

<a href="url-of-bigger-picture.jpg" title="text to use for alt">
    <img ...>
</a>

Then your JS becomes:

$("#ml-games-collection .game1-btn").click(function () {
    $("#ml-display li.game").removeClass("hide").css("display", "none");
    $("#ml-display .game1").show();
});

$("#ml-display .game1-ss1 .clickable").bind("click", function (event) {
    var target = $(event.target);

    $("#ml-display .game1-large-display").attr({
        "alt": target.attr("title"),
        "title": target.attr("title"),
        "src": target.attr("href")
    });
});

Upvotes: 1

Related Questions