Открыть страницу без загрузки с помощью jquery

Question

У меня есть эта страница, которую я создал, чтобы начать работу с сетью на основе этого шаблона.

http://ironsummitmedia.github.io/startbootstrap-freelancer/#

где щелкать эскизы в портфеле, другой веб-страница открывается с более подробной информацией о картинке. Код, который я написал, делает загрузку страницы. Я хочу реализовать его точно так же, как в этом шаблоне.

HTML (для миниатюр):

<div class = "pictures "> 
      <div class = "container "> 
       <div > 

        <center><b><text>PORTFOLIO</text></b></center> 
       </div> 
       <div class = "pics"> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img data-src = "glass.png" src = "cabin.png" id="cabin" alt="" /> 
        </div> 

        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "cake.png" id="cake" alt="" /> 
        </div> 
        </div> 
       </div> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img data-src = "glass.png" src = "circus.png" id="circus" alt="" /> 
        </div> 

        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "game.png" id="game" alt="" /> 
        </div> 

        </div> 
        </div> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "safe.png" id="safe" alt="" /> 
        </div> 

        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "submarine.png" id="submarine" alt="" /> 
        </div> 
        </div> 

        </div> 
        </div> 
      </div> 
     </div> 

Jquery для открытия новой страницы:

$(".pictures .thumbnail img").click (function() { 
        window.location.href = this.id +".html"; 

       }); 

Какие изменения я должен сделать, чтобы мой код, который позволяет мне открывать страницы без загрузки/освежающее?

благодарит заранее!

Answer 1

Чтобы достичь этого, вы должны изучить некоторые AJAX. Прочтите jQuery Docs on AJAX для получения дополнительной информации.

Ajax является сценарий на стороне клиента, который связывается с и с сервера/базы данных без необходимости обратной передачи или полного обновления страницы. Лучшее определение, которое я прочитал для Ajax, - это «способ обмена данными с сервером и обновления частей веб-страницы без перегрузки всей страницы». Источник: Seguetech

Вот пример AJAX и jQuery:

$(document).ready(function(e) { 

    $("form[ajax=true]").submit(function(e) { 

     e.preventDefault(); 

     var form_data = $(this).serialize(); 
     var form_url = $(this).attr("action"); 
     var form_method = $(this).attr("method").toUpperCase(); 

     $("#loadingimg").show(); 

     $.ajax({ 
      url: form_url, 
      type: form_method,  
      data: form_data,  
      cache: false, 
      success: function(returnhtml){       
       $("#result").html(returnhtml); 
       $("#loadingimg").hide();      
      }   
     });  

    }); 

}); 

DEMO

---

Be бесстрашный. Это выглядит несколько запутанным, особенно, начиная с jQuery, но поверьте мне, что это не так. Вы будете рады, что узнали об этом.

Answer 2

Образец, ссылающийся на использование bootstrap modals. Кроме того, чтобы получить данные «на лету», чтобы заполнить модальный, вам нужно знать Ajax. Boy Wonder уже дал определение. Но вы также можете заполнить модальную информацию без получения данных с сайта сервера, она может быть статичной в конце концов. Вы можете узнать о загрузочных модалах отсюда http://getbootstrap.com/javascript/#modals