Jquery LightBox Text

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


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

Uygulamanın çalışır demosunu incelemek için tıklayınız.

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

sword fish

Hem yazılım, hem kendini geliştiriyor. teknoloji meraklısı... kişisel weblogu

Website - More Posts

3 Comments

elyense

25 Nisan 2010 - 21:48 | Permalink

daha açıklayıcı şekilde anlatabilir misiniz ?

26 Nisan 2010 - 15:54 | Permalink

Ö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.

biyo

10 Temmuz 2011 - 15:50 | Permalink

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?

Son Yazılar

Son Yorumlar

Kategoriler

Dosya Arşivi

Bağlantılar

Serpito