2012-09-07 4 views
4

나는이 게시물 How to create a direct link to any fancybox box을 살펴보고 구현했습니다. 그러나 누군가가 이미지를 클릭 할 때마다 URL이 바뀌지 않는 것으로 나타났습니다. 그래서, 기본적으로 모든 스크립트는 제가 사람들에게 이미지의 링크를 제공하는 것입니다. 사람들이 자신을 위해 이미지 링크를 잡아 공유하고 싶다면 어떻게해야할까요? 사람들이 사이트를 탐색 할 때 주소 표시 줄에 다른 이미지 URL을 표시 할 수 있습니까?"어떤 fancybox에 대한 직접 링크"이지만 주소창에 URL이 있습니다

+1

Welcome to StackOverflow! 게시물 당 하나의 질문/주제로 제한하십시오. "Ask Question"을 눌러 새 질문을 시작하십시오. 이렇게하면 사람들이 귀하의 질문을 검토하고 대답하기가 더 쉬워집니다. 감사! – Greg

+0

죄송합니다. – coldpumpkin

답변

8

만약 내가 제대로 이해 :

  • 방문자가 이미지를 클릭, 이미지가 fancybox에 나타납니다.
  • 방문자가 page.html # image01로 이동하면 fancybox에 image01이 이미 표시된 상태로 페이지가로드됩니다.
  • 방문자가 image02를 클릭하면 url이 page.html # image02로 업데이트되기를 원합니다.

그런 경우 이미지를 클릭 할 때 url 해시 조각을 설정할 수 있습니다.

location.hash = "image02"; 

당신의 공급 예를 사용 : 나는 그렉의 코드를 사용

var thisHash = window.location.hash; 
$(document).ready(function() { 
    $('.thumbs').fancybox({ 
     prevEffect: 'fade', 
     nextEffect: 'fade', 
     closeBtn: true, 
     arrows: true, 
     nextClick: true, 
     padding: 15, 
     helpers: { 
      thumbs: { 
       width: 80, 
       height: 80 
      } 
     }, 
     beforeShow: function() { 
      var id = this.element.attr("id") 
      if (id) { 
       window.location.hash = id; 
      } 
     }, 
     beforeClose: function() { 
      window.location.hash = ""; 
     } 
    }); 

    if (thisHash) { 
     $(thisHash).trigger('click'); 
    } 
}); 
+0

안녕하세요. 처음에는 "."을 삽입하면 Dreamweaver에서 오류가 발생하고 실제로 충돌을 일으킨다 고 알려주므로 Dreamweaver가 먼저 작동하지 않습니다. 이미지를 열면 이미지 자체로 리디렉션되기 때문입니다. 두 번째로 코드가 내 페이지 안에있는 모든 이미지 용이므로 작동하지 않을 것입니다. 곧이 예제를 예제 페이지로 업데이트하겠습니다. – coldpumpkin

+0

안녕하세요. 예 (location.hash 없음)에 대한 링크는 다음과 같습니다. http://josemelo.net/example/index.html 여기에 location.hash가있는 예 2의 링크가 있습니다. http :// /josemelo.net/example/index2.html – coldpumpkin

+0

@coldpumpkin - location.hash를 fancybox의 options 객체에 대한 속성으로 추가했습니다. 그건 맞지 않아. 나의 예'location.hash = "image02";는 진술이다. 이벤트 처리기에서 호출해야합니다. – Greg

0

을하지만 (그렉의 방법은 나를 위해 작동하지 않는 때문에 다른 방법으로 ID를 참조) 내가 대신이 옵션을 사용 :

onStart: function(selectedArray, selectedIndex, selectedOpts) { 
     var id = $(selectedArray[ selectedIndex ]).attr('id'); 

     if (id) { 
      window.location.hash = id; 
     } 
    }, 
    onClosed: function() { 
     window.location.hash = ""; 
    } 
0
beforeShow: function() { 
    var id = $(this.element).attr("href"); 

    if (id) { 
     window.location.hash = id; 
    } 
}, 
afterClose: function() { 
    history.pushState("", document.title, window.location.pathname + window.location.search); 
},