Jquery LightBox Text Yayınlama

Daha önceki Slider Galeri uygulamamızda galerimizde yer alan fotograflar istediğimiz nesne tıklanıldığında aktif oluyor ve ekrana gelen panelden fotograf geçişlerini sağlıyorduk.

Bu örnegimizde ise link e tıklanıldığında ekrana kendi belirlemiş olduğumuz içerik gelecek.

Örneğimizde “Site İçeriği” linkine tıklanıldığında gumusluoglu.com blogunda yer alan 7 adet uygulamanın başlıkları ekrana gelecek ve tıklandığında linkler blog yazıları yeni bir pencerede açılacak.

Html kodlarımız


<html>
<head>
<title>Gumusluoglu.com Basit iletişim penceresi </title>
<meta name='author' content='Müslüm Gümüşlüoğlu' />
<meta name='copyright' content='2010 Müslüm Gümüşlüoğlu' />
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='basic-modal' align=quot;centerquot;>
<a href='#' class='basic' style=quot;text-align:centerquot;>Site İçeriği</a>
</div>
<div id=quot;basic-modal-contentquot;>
<h3 align=quot;centerquot;>Örnek Uygulama</h3>
<p>Bu örnek www.gumusluoglu.com sitesi için basit iletişim penceresi amacı ile yapılmıştır.</p>
<p><a href='http://www.gumusluoglu.com/' target=quot;_blankquot;>Ana Sayfa</a></p>
<p><a href='http://www.gumusluoglu.com/kategoriler/jquery-accordion-ve-dorpdown-menu/' target=quot;_blankquot;>jQuery Accordion ve Dropdown Menu</a></p>
<p><a href='http://www.gumusluoglu.com/kategoriler/slider-galeri/' target=quot;_blankquot;>Slider Galeri</a></p>
<p><a href='http://www.gumusluoglu.com/kategoriler/mootools-slider-buton/' target=quot;_blankquot;>Mootools Slider Buton</a></p>
<p><a href='http://www.gumusluoglu.com/kategoriler/surukle-paylas-drag-to-share-2/' target=quot;_blankquot;>Sürükle Paylaş (Drag to Share)</a></p>
<p><a href='http://www.gumusluoglu.com/kategoriler/jquery-online-klavye/' target=quot;_blankquot;>jQuery Online Klavye</a></p>
<p><a href='http://www.gumusluoglu.com/kategoriler/surukle-paylas-drag-to-share-2/' target=quot;_blankquot;>Sürükle Paylaş (Drag to Share)</a></p>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
</body>
</html>

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

4 thoughts on “Jquery LightBox Text Yayınlama

  • Örnegimizde Site İçeriği linkimize tıkladığımızda başka bir sayfaya yönlendirme yapmıyoruz veya site içeriğini başka bir sayfada açmıyoruz. Aynı belgede yer alan basic-modal-content id ne sahip olan div içerisindeki bilgileri ekranımıza LightBox ile getiriyoruz.
    Site içeriği link itıklanıldığında id’si basic-modal-content olan içeriği ekrana getiriyoruz.

  • Güzel paylaşım için teşekkür ederim. “Site başlığı” yerine 5 kutucuk resim koyarak yapmaya çalıştım,ancak bir sorun oluştu: Resimler sırayla gidiyor, yani ilk önce 1. resime tıklayınca sorun yok, ancak tekrar aynı resme tıklayınca 1. resim yerine 2. resim geliyor. Yani neye tıklarsak tıklayalım o sıra devam ediyor.
    Bu sorunu nasıl çözebiliriz?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir