0

Здравствуйте. С горя попалам написал скриптик для картинок галереи. Суть, в каждом диве имеется картинка которая больше самого дива. При наведении картинка прокручивается вверх.

проблема: при наведении на какую-либо из картинок прокручиваются картинки в всех дивах, а надо чтобы в каждом диве только при наведении.

сам скрипт:


$(".gallery_product").hover(function(e) {
    var ImgHeight = $('.gallery_product a img').height();
    var DivHeight = $('.gallery_product').height();
  e.preventDefault();
    $(".gallery_product").mouseout(function() {
  $(".gallery_product").removeClass('hover');
   $('.gallery_product a img').css('margin-top', '0').css('transition', 'all 1s ease 0s');
    });
    $(".gallery_product").mouseover(function() {
  $(this).addClass('hover').attr('height', ImgHeight);
        //$(this).attr('height', ImgHeight);
    $('.gallery_product a img').css('margin-top', - ImgHeight + DivHeight).css('transition', 'all 5s ease 0s');
    });
})

  <!-- portfolio-area start -->
  <div class="work">
    <div class="container">
        <h3><span>Ç</span>Çalışmalarımız</h3>
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                <nav class="navbar navbar-default">
                  <div class="container">
                    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->  
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                    </div>

                    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->  
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                      <ul class="nav navbar-nav btn-group" role="group">
                        <li><a class="btn btn-default filter-button" data-filter="all">Tümü</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="web">Web Tasarım</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="psd">PSD Döküm</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="development">Yazılım</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="wordpress">Wordpress</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="shop">E-Ticaret</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="seo">SEO</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="landing">Landing</a></li>
                      </ul>
                    </div><!-- /.navbar-collapse -->
                    </div>  
                  </div><!-- /.container -->  
                </nav>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter web development">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/black-mask-prelanding-page-1.jpg" alt="#"></a>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter development wordpress">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/detofit-landing-page-2.jpg" alt="#"></a>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter web shop">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/instagram-landing-korse.jpg" alt="#"></a>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter shop">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/onform-korse-landing-page.jpg" alt="#"></a>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter wordpress">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/marketyum-product-page.jpg" alt="#"></a>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter shop">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/detofit-landing-page-1.jpg" alt="#"></a>
            </div>

            <div class="gallery_product col-sm-6 col-md-3 filter wordpress">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/black-mask-prelanding-page-1.jpg" alt="#"></a>
            </div>
        </div>

        <a class="btn btn-default filter-button">Tümünü Gör</a>
    </div>
  </div>
  <!-- portfolio-area end -->

в css нет необходимости

Подкоректируйте пожалуйста.

3
  • что удивительно наведение работает на каждый див отдельно, тоесть добавляет и удаляет класс, а вот эфект прокрутки нехочет. Почему я расчитывал высоту картинки? у каждой картинки разная высота. Поэтому и надо чтобы эффект был на каждый отдельно. 10 июн 2017 в 16:30
  • Я тоже не русский, но стараюсь проверять свой текст перед публикацией. А на счет вопроса что бы у людей было желание помочь хорошо бы еще добавить html, css код, при том что вырезано все лишнее, как вот комментарии тут.
    – Telion
    10 июн 2017 в 17:10
  • @telion а вот за htm и css сорри. добавляю 10 июн 2017 в 17:12

1 ответ 1

0

Всем спасибо. Решение нашел. полностью новый код выглядит:

$(".work .gallery_product").each(function() {   
  $(".gallery_product").mouseover(function() {
    $(this).addClass('hover');
      var ImgHeight = $('.gallery_product.hover a img').height();
      var DivHeight = $('.gallery_product').height();
    $('.gallery_product.hover a img').attr('height', ImgHeight);
    $('.gallery_product.hover a img').css('margin-top', - ImgHeight + DivHeight).css('transition', 'all 5s ease 0s');
  });

  $(".gallery_product").mouseout(function() {
    $(".gallery_product").removeClass('hover');
      $('.gallery_product a img').css('margin-top', '0').css('transition', 'all 1s ease 0s');
  });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.