이미지 호버에서만 팬시 박스 제목을 표시하는 방법

Question

이미지 갤러리에 Fancybox plugin을 사용하고 있으며 사용자가 이미지 위에 마우스를 가져 갔을 때만 이미지 제목을 표시하려고합니다. 이 작업을 수행하기 위해 수정할 코드 부분을 파악할 수 없습니다. 나는

.fancybox-opened .fancybox-title { 
} 

을하지만 :

나는 다음에 a :hover 상태를 추가하여 CSS 편집을 시도했다 :

.fancybox-title-over-wrap { 
} 

그리고 난 여기에 CSS의 가시성 설정을 가지고 노는 시도했습니다 운이 없었어요.

실제 JS 파일 내에서 뭔가를 변경해야합니까? 어떤 도움이라도 대단히 감사하겠습니다! 자신의 사이트에서

Answer 1

원본 js 또는 CSS 파일. 나만의 맞춤 스크립트를 만들고이를 구현하기 위해 몇 가지 fancybox API 옵션과 메소드를 적용하면됩니다. title 효과에 대해 다음 옵션을 시도, 위의 스크립트에서, 지금

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

: 당신이 좋아하는 fancybox 화재 사용자 정의 스크립트를 필요

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

이 HTML을 가지고 예를 들어

, 원하는 :

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

같은 주 : 이것은 당신이 AJ JS fillde 설정할 수 있습니다 fancybox의 버전 2.x

Answer 2

:

이가 상단에 메인 페이지에 있는지 확인합니다 :

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

그리고, 여기를 참조하십시오

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

그리고이 같은 : http://docs.jquery.com/Tutorials:How_jQuery_Works

는 설명이 요청한대로, 어쩌면 자바 스크립트에서 이것을 시도 표시하려면 이미지 구문 :

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