Как реализовать кнопку «Подробнее» с запросом Get

Question

Я работаю над изображением в галерее в веб-храме. где каждое изображение 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 либо на ползунке, либо внутри обычной веб-страницы, чтобы перенаправить его на другую страницу?

Может ли кто-нибудь принять участие в этом, пожалуйста?

второй вопрос. Я пытаюсь использовать этот более сложный сценарий, чтобы сохранить текущий search.png внутри веб-страницы, но заменить его «ReadMore» на слайдере?

EDIT я хочу, чтобы избежать добавлений дополнительной пяди внутри моей разметки, так как есть скрипт, который собирается читать пядь и отображать их внутри слайдера 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

Используйте поверочный тег с атрибутом данных, содержащего свой адрес вместо поиска изображения.

<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. 
    }); 
})