Блог

Главная - Вопросы по программированию - Упрощающий Jquery

Упрощающий Jquery

#image #jquery #loader #preloader

#изображение #jquery #загрузчик #предварительный загрузчик

Вопрос:

Я изо всех сил пытаюсь упростить приведенный ниже код….

Вы увидите, что есть 3 разных изображения, которые запускают создание большого изображения, я думаю, вы можете назвать это слайд-шоу с возможностью нажатия. Я хотел бы добавить предварительно загруженное изображение, когда пользователь нажимает на изображение.

Кроме того, имейте в виду, что есть точно такой же пакет 2,3,4. Я хотел бы сделать это как можно более чистым и легким.

Есть мысли?

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

Комментарии:

1. итак, вы хотите очистить свой код jQuery, вот и все?

2. да, а также добавить изображение предварительного загрузчика.

3. вы должны задать это в отдельном вопросе, предварительный загрузчик сильно отличается от очистки кода … и определенно заслуживает отдельного вопроса. Хотя, попросив кого-нибудь написать код для вас, вы можете не получить наилучшего ответа, было бы лучше, если бы вы попытались заняться этим и задавали вопросы по ходу дела, или попросили высокоуровневое описание того, как приступить к созданию предварительного загрузчика.

Ответ №1:

Оберните каждое изображение 

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

Тогда ваш JS становится:

 $("#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")
    });
});