Tıklandığında açılan çerçeve içinde link yüklenmesi

Facebook sitesinin popülerliğini herkes bilir. Ne yapsa, ne etse birileri aynısını çıkarır. Özellikle resim, video gibi içeriklere tıklandığında aynı çerçevede başka bir kutu içinde açılma özelliği bir çok site tarafından kullanılıyor ve buna benzer uygulamalar geliştiriliyor. jQuery FrameWarp uygulaması da Facebook benzeri tıklandğında içeriğin başka bir kutu içinde açılmasını sağlayan bir örnektir. FrameWarp kullanarak tıklandığında açılan kutunun içinde resim, video, form sayfası gibi örneklerin incelenmesini sağlayabilirsiniz. Ayrıca tıklandığında açılan kutu içinde ajax ile başka bir sayfayı da çağırabilirsiniz. İnternet Explorer 9 sürümüde html5shiv desteği sayesinde kullanılabiliyor.

Demo sayfasında dialog penceresi için dört adet buton bulunuyor.

Try it : frame.html adlı dosya içeriğini çekerek dialog penceresi içinde gösteriyor.
Message Passing : message.html dosyasını çekerek dialog penceresi içinde gösterip ziyaretçilerin yazdığı mesajları sayfada yayınlıyor. Deneme olarak herhangi bir mesaj yazıp pencereyi kapattıktan sonra mesajı demo sayfasının altında görebilirsiniz.
With Cache : Cache ile belirlediğiniz bir websitesini dialog penceresi içinde gösteren butondur.
Without Cache : Cache olmadan siteyi dialog penceresinde gösteren buton.

Kullanım :

Head etiketleri arsına eklemeniz gereken bölüm.

IE9 için Html5 Shiv :

        <!--[if lt IE 9]>
          <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

Js ve css dosya adresleri :

<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="framewarp/framewarp.css" />
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/jquerypp.custom.js"></script>
<script src="framewarp/framewarp.js"></script>

JavaScript :

//Copyright Freddy Heppell 2012
//This code is an example, used to power the three demos in the index.html file
//Please keep this copyright notice

//Replace the #b1 , #b2 ect. bit on each script to the id of the element that opens it.
$(function(){

	// This bit powers the first demo.
	//To use this give any hyperlink a id of 'b1'. When the link is clicked it will open the hyperlink's href in a modal

	$('#b1').frameWarp();

	//This powers the message passing. Again no url is provided so the href of the button is used
	//This script shows the passed value on the index.html page.
	$('#b2').frameWarp({
		onMessage: function(msg){
		//Change this bit to do different things to the passed value
			$('#messages').append('<b>Message Received:</b> '+ msg+'<br />');
		}
	});

	// When a url is provided the href of the link should be #
	//This will open the cnn website, with a nice circle loader
	//Change the url to open a different site
	$('#b3').frameWarp({
		url : 'https://www.mintik.com/'
	});

	// This is the same as above but caching is enabled
	$('#b4').frameWarp({
		url : 'https://www.mintik.com/',
		cache:false
	});
});

Body etiketleri arasına eklemeniz gerkene bölüm.

Html :

<div id="main">
   <img src="assets/img/tooltip.png" width="575" height="217" alt="FrameWarp Plugin"  />
   <a href="frame.html" class="button2" id="b1">Try it!</a>
   <a href="message.html" class="button1" id="b2">Message Passing</a> 
   <a href="#" class="button1" id="b3">With Cache</a> 
   <a href="#" class="button1" id="b4">Without Cache</a>
   <p id="messages"></p>
</div>

Download

Demo