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 that you have read and understand our privacy policy and code of conduct.

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