哈希在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

當我把代碼與畫廊的箭頭導航，我得到了以下網址： 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));

如果你顯然需要基於JavaScript還有你的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（'＃'，''）; //刪除＃ imageIndex = parseInt（imageIndexStr，0）; //轉換爲int }' – Hedra

它不起作用...在HTML代碼中，例如''其中href是散列。所以我認爲在當前的'window.location.hash = current + .........' – Hedra

@JasonB之後缺少一些東西。 - 你必須向我展示你的HTML（把它放在你的問題中，而不是在評論中）並解釋導航事件是如何開始的。 – jfriend00

哈希在URL中不完整

回答

相關問題