Как отображать заголовок fancybox только при наведении изображения - PullRequest
Новая
       21

Как отображать заголовок fancybox только при наведении изображения

1 голос
/ 03 февраля 2012

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

Я попытался отредактировать CSS, добавив a :hover состояние к следующему: 

.fancybox-title-over-wrap {
}

, и я даже попытался поиграть с настройками видимости CSS здесь: 

.fancybox-opened .fancybox-title {
}

Однако мне не повезло.

Должен ли я что-то изменить в самом файле JS?Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

7 голосов
/ 03 февраля 2012

Вам не нужно связываться с оригинальными файлами js или css.Вам просто нужно создать свой собственный скрипт и применить для этого некоторые опции и методы fancybox API.

Например, имея этот html 

<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a>

, вам понадобится собственный скрипт дляfire fancybox наподобие: 

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox();
}); // ready
</script>

Теперь, в приведенном выше сценарии, попробуйте следующие параметры для нужного эффекта title: 

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").show();
    }, function() {
     $(".fancybox-title").hide();
   });
  }
 });
}); // ready
</script>

Вы можете даже добавить хорошую анимациюпоказать title как 

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").stop(true,true).slideDown(200);
    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
   });
  }
 });
}); // ready
</script>

ПРИМЕЧАНИЕ : это fancybox v2.x

0 голосов
/ 03 февраля 2012

со своего сайта:

Убедитесь, что это на главной странице вверху: 

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>

Затем добавьте синтаксис этого типа к изображениям, с которыми вы хотите это сделать. 

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

Наконец, сделайте все это с небольшим количеством jScript. 

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

А если у вас все еще проблемы, обратитесь сюда: http://docs.jquery.com/Tutorials:How_jQuery_Works

Чтобы описания выглядели так, как вы просили, возможно, попробуйте это в javascript: 

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

И это как ваш синтаксис изображения: 

<a class="fancybox" rel="gallery1" href="http://path-to-image.com/images/photo.jpg" title="Some Description Here.">
    <img src="http://path-to-image.com/images/photo.jpg" alt="" />
</a>
...