각 jQuery galleria 이미지가로드 될 때 다른 "객체"를 표시합니다.

StackOverflow https://stackoverflow.com/questions/2434826

  •  19-09-2019
  •  | 
  •  

문제

각 개별 이미지에서 다른 기능을 트리거하는 방법을 찾고 있습니다. Galleria jQuery 플러그인을 사용하고 있으며 내 사이트에 설정되어 있습니다. 문제는 어떤 이미지가로드되었는지에 따라 정보가있는 div를 표시하고 싶다는 것입니다. 어떤 이미지가 표시되는지와 그에 따라 조건을 만드는 방법을 캡처하는 방법을 알 수 없습니다.

도움이 되었습니까?

해결책

업데이트되었습니다

데모: http://jsbin.com/egavo/6

원래 Galleria 플러그인을 해킹하지 않고 코드에 추가하십시오!

CSS 부품 :

    /* HOVER CSS EFFECT */

.imageteaser {
  margin: 0;
  overflow: hidden;
  float: left;
  position: relative;
}

.imageteaser:hover {
  cursor: pointer;
}

.imageteaser .more {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 1.2em;
  color: #fff;
  background: #000;
  padding: 5px 10px;
  filter:alpha(opacity=65);
  opacity:.65;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imageteaser  .desc {  display: none; }
.imageteaser:hover .more { visibility: hidden;}
.imageteaser:hover .desc{
  display: block;
  font-size: 1.2em;
  background: #111;
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
  color: #fff;
  position: absolute;
  bottom: 11px;
  left: 0;
  padding: 10px 5px;
  margin: 0;
  width: 702px;
  border-top: 1px solid #999;
  text-align:left
}

  .imageteaser:hover .desc strong {
  display: block;
  margin-bottom: 5px;
  font-size:1.5em;
        float:right;
        margin-right:20px
}

jQuery (최신 버전) 부분 :

$(".gallery_demo_unstyled img").click( function() {

  var src = $(this).attr('src');

  $('.imageteaser').remove();

  $('.galleria_wrapper').before('<div class="imageteaser">'+
  '<img src="'+src+'" alt="" />'+
  '<span class="more">> read more</span>' +
  '<span class="desc">'+
  '<strong>click</strong>'+
  $(this).attr('title') +
  '</span></div>');

  $('.galleria_wrapper').attr('style','display:none');

}).filter(':first').click();  

   $(".imageteaser .desc strong").live( 'click' , function() {
     alert('run function!');
   });

이것은 당신이 원하는 것을 정확히합니다! ;-)

알려줘요!

다른 팁

해당 플러그인에 익숙하지는 않지만 이미지가 데이터베이스에서 가져 오면 설정된 데이터 범위 (범주와 같은) 또는 각 항목 당 특정 데이터 (예 : 캡션)를 연관시킬 수 있습니다. 각 이미지를 사용하면 jQuery가 해당 데이터를 플러그인으로 외삽 할 수 있습니다.

"onimage"콜백이 있으며 이미지 요소가 표시됩니다. 각 이미지에 "ID"값을 제공하거나 "SRC"속성 만 보면 표시 할 정보를 알 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top