Форум

alexmixaylov · #1 (**permalink**) 24.11.2014, 11:23

Сделал скрипт отображения галереи - тормозит жутко
Не подскажите как можно оптимизировать его?
Где слабое место?

<div id="modal100">
    <p id="image-insert"><img id="big-foto"></p> 
</div>
<div id="large">
    <a class="jea_modal" href="<?php echo $mainImage->URL ?>" >
        <img
            src="<?php echo $mainImage->mediumURL ?>" 
            id="jea-preview-img" 
            alt="<?php echo $mainImage->title ?>" 
            title="<?php echo $mainImage->description ?>" 
            />  
    </a>
</div>

<ul id="thumbnail">
    <?php foreach ($this->row->images as $image) : ?>
        <li >
            <a class="gallery-min" href="<?php echo $image->mediumURL ?>" name="<?php echo $image->URL ?>">
                <img class="" src="<?php echo $image->minURL ?>" alt="<?php echo $image->title ?>" title="<?php echo $image->description ?>"/>
            </a>
        </li>
    <?php endforeach ?>
</ul>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#thumbnail a.gallery-min").click(function (e) {
            e.preventDefault();
            var getHref = jQuery(this).attr("href");
            var getSrc = jQuery(this).attr("name");

            jQuery("#large img").attr({"src": getHref});
            jQuery("#large a.jea_modal").attr({"href": getSrc});
            //console.log(getSrc);
        });

        jQuery("#large a.jea_modal").click(function (ei) {
            ei.preventDefault();
            var getHref = jQuery(this).attr("href");
            
            jQuery("#image-insert img#big-foto").attr({"src": getHref});
                        setTimeout(function () {
            jQuery("#modal100").show().delay(2000);

            var widthPhoto = jQuery('img#big-foto').width();
            var widthParent = jQuery('#image-insert').width();
            var calcWidth = (widthParent - widthPhoto) / 2;

            var heightPhoto = jQuery('img#big-foto').height();
            var heightParent = jQuery('div#modal100').height();
            var calcHeight = (heightParent - heightPhoto) / 2;

            console.log(heightParent);
            console.log(heightPhoto);
            jQuery('img#big-foto').css({'position': 'absolute', 'margin-left': calcWidth, 'margin-right': calcWidth, 'margin-top': calcHeight, 'margin-bottom': calcHeight});
        }, 500);

        });

        jQuery("#modal100").click(function () {
            jQuery(this).hide();
        });
    });
</script>

рони · #2 (**permalink**) 24.11.2014, 11:28

alexmixaylov,
сделали бы нормальный макет с возмоожностью просмотра

рони · #3 (**permalink**) 24.11.2014, 11:31

alexmixaylov,
а setTimeout это-то зачем?

alexmixaylov · #4 (**permalink**) 24.11.2014, 12:18

Сообщение от рони

alexmixaylov,
а setTimeout это-то зачем?

Когда включаю на планшете, то глючит
открыл в попапе одну картинку
закрыл
потом открыл вторую, а там висит еще перваяи через время появляется вторая

рони · #5 (**permalink**) 24.11.2014, 12:59

alexmixaylov,
значит алгоритм показа непродуман раз требуется для jQuery setTimeout ... без макета далее никак.

alexmixaylov · #6 (**permalink**) 24.11.2014, 14:10

http://learn.javascript.ru/play/Ntq0Zb
как код из песочницы правильно вставить? незнаю

рони · #7 (**permalink**) 24.11.2014, 15:20

alexmixaylov, вариант ...

<!DOCTYPE HTML>
<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <style type="text/css">
a.jea_modal {
    width: 100%;
    height: 100%;
    display: block;
}

#modal100 {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    z-index: 9999999;
}
#modal100 img{display: none;}
li{
   float: left;

}
ul {
	list-style: none;
}

    </style>
  </head>
  <body>
<div id="modal100">
    <p id="image-insert"><img id="big-foto"></p>
</div>
<div id="large">
    <a class="jea_modal" href="http://realtysea.esy.es/images/com_jea/images/5/main-282-1-960x680-big.jpg" >
        <img src="http://realtysea.esy.es/images/com_jea/thumb-medium/5-main-282-1-960x680-big.jpg"
            	id="jea-preview-img"/>
    </a>
</div>

<ul id="thumbnail">
 <li >
   <a class="gallery-min" 	href="http://realtysea.esy.es/images/com_jea/thumb-medium/5-dom_moey_mechti1.jpg"
   							name="http://realtysea.esy.es/images/com_jea/images/5/dom_moey_mechti1.jpg">
     <img  src="http://realtysea.esy.es/images/com_jea/thumb-min/5-dom_moey_mechti1.jpg"/>
   </a>
 </li>
   <li >
   <a class="gallery-min" 	href="http://realtysea.esy.es/images/com_jea/thumb-medium/5-x_df391ec2.jpg"
   							name="http://realtysea.esy.es/images/com_jea/images/5/x_df391ec2.jpg">
     <img  src="http://realtysea.esy.es/images/com_jea/thumb-min/5-x_df391ec2.jpg"/>
   </a>
 </li>
 </ul>


    <script>
jQuery(function($) {
          jQuery.fn.center = function() {
              var w = $(window);
              this.css("position", "absolute");
              this.css({
                  "top": (w.height() - this.height()) / 2 + w.scrollTop() + "px",
                  "left": (w.width() - this.width()) / 2 + w.scrollLeft() + "px"
              });
              return this
          };

          var $img = $("#thumbnail a.gallery-min img"),
              $large = $('#large img'),
              $big = $('#big-foto'),
              $modal = $('#modal100');
          $large.load(function() {
              $large.fadeIn("slow")
          }).click(function(event) {
              event.preventDefault();
              $modal.show();
              $big.stop().show({'duration' : 1500, 'step' : function ()
{
      $big.center();
}
})

          })
          $img.click(function(event) {
              event.preventDefault();
              var src = this.src.replace('thumb-min', 'thumb-medium');
              var bigSrc = this.src.replace('thumb-min/5-', 'images/5/');
              $big[0].src = bigSrc;
              new Image().src = src;
              $large.fadeOut("slow", function() {
                  this.src = src;
                  this.complete && $(this).load()
              })
          }).get(0).click();
          $modal.click(function() {
              $modal.hide();$big.stop(true,true).hide()
          });
      });
    </script>
  </body>
</html>

alexmixaylov · #8 (**permalink**) 25.11.2014, 14:25

Подредактировал немного эту часть

$img.click(function (event) {
            event.preventDefault();
            var src = this.src.replace('thumb-min', 'thumb-medium');
            //var bigSrc = this.src.replace('thumb-min', 'images');
            var bigSrc = jQuery(this).parent().attr('name');
            
            $big[0].src = bigSrc;
           
            new Image().src = src;
            $large.fadeOut("slow", function () {
                 
                this.src = src;
                console.log(this);
                this.complete && $(this).load()
            })
        }).get(0).click();

не получается там просто заменить путь, потому что thumb-min/5-', 'images/5/ может меняться число

Работает ок, только с позиционированием вертикальным беда
сдвигает вниз картинку модальную

рони · #9 (**permalink**) 25.11.2014, 14:35

Сообщение от alexmixaylov

сдвигает вниз картинку модальную

может картинка уже не влазит в полный рост и размер уменьшать чтоб вписалась в видимую часть окна

alexmixaylov · #10 (**permalink**) 25.11.2014, 15:35

не картинка меньше
маржин по вертикали че то большой считает

Форум

Справочник

Discord чат

Курсы javascript