如何使用Get請求實現「Read More」按鈕

Question

我正在使用Web模板中的圖像gallary。其中每個圖像constrcuted如下： -

<li> 
<figure><a href="~/img/big.jpg" class="thumb"><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/search.png" alt=""></span></a></figure> 
</li> 

現在如圖所示的標記內，當用戶訪問small.jpg將呈現的頁面，那麼如果他點擊small.jpg，另一個圖像命名big.jpg會顯示在一個jquery滑塊內，這裏是一個真實網站上的示例http://static.livedemo00.template-help.com/wt_47767/index-2.html

現在我想要做的是用按鈕或鏈接替換search.png（儘管添加鏈接不會因爲標記已經在鏈接中了!!），所以如果用戶單擊滑塊上的ReadMore或正常網頁中的ReadMore將其重定向到另一個頁面？

任何人都可以請這個請嗎？

第二個問題。我正在嘗試這個更復雜的場景，就是在網頁中保留當前的search.png，但要用滑塊上的「ReadMore」替換它？

編輯 我希望避免增加額外的跨度我的標記內，因爲有是要讀的跨度，並顯示它們的jQuery的滑塊內的腳本。所以我取代了跨度文本如下：

<li> 
    <figure><a href="~/img/big.jpg" class="thumb"><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><text class="read-more" data-goto="/Home/">Read More</text></span></a></figure> 
    </li> 

這裏是腳本： -

<script> 

    $(function() { 
     $('.read-more').on("click", function (e) { 

      window.location = $(this).attr('data-goto'); 
      e.stopPropagation(); // this prevents the anchor click from triggering. 
     }); 
    }) 
    </script> 

，但目前滑塊我會得到下面的文本，裏面

但是當我點擊它，我不會被重定向到主頁，而不是jQuery的滑塊將被解僱。如果我在網頁（不是在jQuery的滑塊內），我舔ReadMore我只會得到我的瀏覽器上的圖片...

BTW這裏是touch.jquery.js腳本里面的回調函數我寫道在滑塊內添加跨度： -

function loadImage(src, callback){ 
      var img = $('<img>').on('load', function(){ 
       callback.call(img); 
      }); 

      img.attr('src', src); 
      var allcaptions = $("figure span"); 

      // setTimeout is a hack here, since the ".placeholders" don't exist yet 
      setTimeout(function() { 
       $(".placeholder").each(function (i) { 

        // in each .placeholder, copy its caption's mark-up into it (remove the img first) 
        var caption = allcaptions.eq(i).clone(); 
        caption.find("img").remove(); 
        $(this).append("<div class='caption'>" + caption.html() + "</div>"); 
       }); 
      }, 500 
    ); 
     } 

Answer 1

使用帶有包含url的數據屬性的span標籤代替搜索圖像。

<li> 
    <figure> 
     <a href="~/img/big.jpg" class="thumb"> 
      <img src="~/img/small.jpg" alt=""/> 
      <span><strong>Project name:</strong><em>Villa</em> 
       <span class="read-more" data-goto='/read/more/url'>Read More</span> 
      </span> 
     </a> 
    </figure> 
</li> 

隨後的JavaScript將是：

$(function(){ 
    $('.read-more').click(function(e){ 
     window.location = $(this).attr('data-goto'); 
     e.stopPropagation(); // this prevents the anchor click from triggering. 
    }); 
})