해시가 URL에 가득하지 않습니다.

갤러리에 Jquery Elastislide가 있습니다.해시가 URL에 가득하지 않습니다.

var imageIndex = 0; 
if (window.location.hash) { 
    var imageIndexStr = window.location.hash.replace('#',''); // remove # 
    imageIndex = parseInt(imageIndexStr, 0); // convert to int 
}

위의 코드 덕분에 갤러리에는 해시가있는 사진이 있습니다. www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE 나는 갤러리의 화살표로 이동하는 코드를 넣을 때

, 나는 다음 URL에서 얻을 : www.example.com/gallery.html# 1

_navigate  = function(dir) { 



       // navigate through the large images 

       if(anim) return false; 
       anim = true; 

       if(dir === 'right') { 
        if(current + 1 >= itemsCount) 
         current = 0; 
        else 
         ++current; 
       } 
       else if(dir === 'left') { 
        if(current - 1 < 0) 
         current = itemsCount - 1; 
        else 
         --current; 
       } 

       _showImage($items.eq(window.location.hash = current));

그래서, 나는 URL에 전체 해시를 얻기 위하여 도움을 원한다.

www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE

HTML 코드 :

<head> 
<style> 
       .es-carousel ul{ 
        display:block; 
       } 
      </style> 

      <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">  
      <div class="rg-image-wrapper"> 
       {{if itemsCount > 1}} 
        <div class="rg-image-nav"> 
         <a href="#" class="rg-image-nav-prev">Previous Image</a> 
         <a href="#" class="rg-image-nav-next">Next Image</a> 
        </div> 
       {{/if}} 
       <div class="rg-image"></div> 
       <div class="rg-loading"></div> 
       <div class="rg-caption-wrapper"> 
        <div class="rg-caption" style="display:none;"> 
         <p></p> 
        </div> 
       </div> 
      </div> 
     </script> 
</head> 

<body> 

<div class="container_gallery"> 


<div id="rg-gallery" class="rg-gallery"> 
        <div class="rg-thumbs"> 
         <!-- Elastislide Carousel Thumbnail Viewer --> 

         <div class="es-carousel-wrapper"> 
          <div class="es-nav"> 
           <span class="es-nav-prev">Previous</span> 
           <span class="es-nav-next">Next</span> 
          </div> 
          <div class="es-carousel"> 
           <ul> 
            <li> <a href="#0_Title_1"><img src="picture_thumb.jpg" data-large="picture.jpg" alt="Title_1" data-description="Title_1" /></a></li> 

href="#0_Title_2"><img src="picture2_thumb.jpg" data-large="picture2.jpg" alt="Title_2" data-description="Title_2" /></a></li> 

href="#0_Title_3"><img src="picture3_thumb.jpg" data-large="picture3.jpg" alt="Title_3" data-description="Title_3" /></a></li> 



</ul> 
          </div> 
         </div> 
         <!-- End Elastislide Carousel Thumbnail Viewer --> 
        </div><!-- rg-thumbs --> 
       </div><!-- rg-gallery --> 



</div>

이벤트 탐색 : 귀하의 답변

$('#img-wrapper-tmpl').tmpl({itemsCount : itemsCount}).prependTo($rgGallery); 

      if(itemsCount > 1) { 
       // addNavigation 
       var $navPrev  = $rgGallery.find('a.rg-image-nav-prev'), 
        $navNext  = $rgGallery.find('a.rg-image-nav-next'), 
        $imgWrapper  = $rgGallery.find('div.rg-image'); 

       $navPrev.on('click.rgGallery', function(event) { 
        _navigate('left'); 
        return false; 
       }); 

       $navNext.on('click.rgGallery', function(event) { 
        _navigate('right'); 
        return false; 
       }); 

       // add touchwipe events on the large image wrapper 
       $imgWrapper.touchwipe({ 
        wipeLeft   : function() { 
         _navigate('right'); 
        }, 
        wipeRight   : function() { 
         _navigate('left'); 
        }, 
        preventDefaultEvents: false 
       }); 

       $(document).on('keyup.rgGallery', function(event) { 
        if (event.keyCode == 39) 
         _navigate('right'); 
        else if (event.keyCode == 37) 
         _navigate('left');  
       }); 

      } 

     },

감사합니다.

출처

2012-08-28 Hedra

문서 해시에 바인드 메소드를 추가 할 수 있습니다. 따라서 해시가 변경 될 때마다 콜백 함수가 호출됩니다. – insomiac

이 코드 줄은 해시 값을 단지 www.example.com/gallery.html#1과 같은 숫자가되도록 설정합니다.

_showImage($items.eq(window.location.hash = current));

내비게이션 기능이 사진을 변경할 때 새로운 해시 값에 제목을 표시하지 않는 것처럼 보입니다. 난 당신이 뭔가 할 생각 :

window.location.hash = current + "_" + newPictureTitle; 
_showImage($items.eq(current));

당신은 분명 당신이 보여준 자바 스크립트 HTML 등을 바탕으로 newPictureTitle

의 값을 기입 할 필요가, 당신의 _navigate() 기능이 작동 할 수 다음과 같이하십시오.

_navigate = function(dir) { 
    // navigate through the large images 
    if(anim) return false; 
    anim = true; 

    if(dir === 'right') { 
     if(++current >= itemsCount) 
      current = 0; 
    } else if(dir === 'left') { 
     if(--current < 0) 
      current = itemsCount - 1; 
    } 

    // show the right image 
    _showImage($items.eq(current)); 

    // now get the right image title so it can go in the hash value 
    // we assume here that current is a zero based index 
    var links = $("#rg-gallery .es-carousel li a"); 
    // use getAttribute here to get the raw href that's in the 
    // HTML source file (not a fully qualified URL) 
    window.location.hash = links.get(current).getAttribute("href"); 
}

출처

2012-08-28 00:57:30 jfriend00

감사합니다. 그렇다면 어떻게 전체 해시를 사용할 수 있습니까? 그림의 엄지 손가락을 클릭하면 전체 해시를 표시하는 코드가 생겼습니다. 'var imageIndex = 0; if (window.location.hash) { var imageIndexStr = window.location.hash.replace ('#', ''); // remove # imageIndex = parseInt (imageIndexStr, 0); // int convert to int } – Hedra

작동하지 않습니다 ... HTML 코드에서, 예를 들어''을 사용합니다. 여기서 href는 해시입니다. 그래서 현재의'window.location.hash = current + .........' – Hedra

@JasonB 뒤에 뭔가 빠져 있다고 생각합니다. - HTML을 보여줘야하며 (주석이 아닌 질문에 넣어야 함) 탐색 이벤트가 시작되는 방법을 설명해야합니다. – jfriend00

해시가 URL에 가득하지 않습니다.

답변

관련 문제