Bootstrap ile lightbox yada fancybox kullanılabiliyor mu?

Kodla Büyü
regulus11

regulus11

Seçkin Üye
Seçkin Üye
Mesajlar
523
Bootstrap ile ilgili türkçe kaynak bulmakda zorlanıyorum. Konu başlığında bahsettiğim sorunun cevabını merak ediyorum. css ve javascript konusunda çok iyi değilim. Konu hakkında tecrübesi olan var mı?

Bootstrapda modal özelliğini kişiselleştirip lightbox'a benzetmek mümkün mü?
Önerebileceğiniz türkçe/ingilizce kaynak var mı?
 
jquery ile beraber harikalar yaparsın.
fakat önce jquery öğren sonra css
bootstrap kitabı D&R de görmüştüm. aslında internet yeter ama sen bilirsin.
jquery içinde gene kitaplar var. Fakat internet derslerini adım adım takip ilgili forumlara takılırsan. gerek kalımaz.

takıldığın yerlerde google arama yapmak lazım. Seni zorlayacak olan seçeceyin arama kelimeleri olacak. uygun anahtar kelimeyi yazarsan %99 tüm sorunlarınla ilgili paylaşımlar bulacaksındır.
 
kesinlikle http://photoswipe.com/ tavsiye ederim.Söylediğinizde elbette mümkün ama gerek mobil olsun gerek responsive özelliği olsun photoswipe çok başarılı vanilla js :) kullanıyor olması amd desteğinin olması ve özelliştirme olanağının olması bazı artılarından sadece bir kaçı.
 
Cevaplarınız için teşekkürler. Sıfırdan jquery öğrenmeye şimdilik vakit ayıramayacağım.
Daha önce Habib Ocak tarafında buradan da paylaşılan bir video derste lightbox kullanımı açıklanıyor. Fakat ben galeri yapmak istemiyorum aynı sayfadaki resimlerim birbirinden bağımsız olarak tek lightbox ile açılsın istiyorum. bir sayfaya ulastım yapmaya çalıştığım şeyin cevabı olabilir ama saatlerce ugrasmama ragmen çözemedim.
Bakabilir misiniz...
https://www.jasonbutz.info/bootstrap-lightbox/

css ve js dosyalarını sayfaya ekliyorum.
sonra kopyaladığım kodları aşağıdaki gibi yapıştırıyorum

<a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>


Open Lightbox linkine tıkladığım hiç birşey olmuyor link hedefinde #demoLightbox gösteriyor ama tık yok! Nerde eksik yapıyorum acaba?
 
regulus11' Alıntı:
Cevaplarınız için teşekkürler. Sıfırdan jquery öğrenmeye şimdilik vakit ayıramayacağım.
Daha önce Habib Ocak tarafında buradan da paylaşılan bir video derste lightbox kullanımı açıklanıyor. Fakat ben galeri yapmak istemiyorum aynı sayfadaki resimlerim birbirinden bağımsız olarak tek lightbox ile açılsın istiyorum. bir sayfaya ulastım yapmaya çalıştığım şeyin cevabı olabilir ama saatlerce ugrasmama ragmen çözemedim.
Bakabilir misiniz...
https://www.jasonbutz.info/bootstrap-lightbox/

css ve js dosyalarını sayfaya ekliyorum.
sonra kopyaladığım kodları aşağıdaki gibi yapıştırıyorum

<a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>


Open Lightbox linkine tıkladığım hiç birşey olmuyor link hedefinde #demoLightbox gösteriyor ama tık yok! Nerde eksik yapıyorum acaba?
Genişletmek için tıkla ...
hangi bootstrap sürümünü kullanıyorsunuz normalde modal çalışıyor mu? bootstrap.js ekli olmayabilir .
data-toggle olarak değilde javascript ile çalıştırmayı denediniz mi?
 
ceremy' Alıntı:
hangi bootstrap sürümünü kullanıyorsunuz normalde modal çalışıyor mu? bootstrap.js ekli olmayabilir .
data-toggle olarak değilde javascript ile çalıştırmayı denediniz mi?
Genişletmek için tıkla ...
Bootstrap 3.3.7 sanırım. Birkaç gün oldu indireli. bootstrap js ekli.
Normalde modal calısıyor. Hatta lightboxdan vazgectim resimleri modal ile açayım dedim. Ama galiba sayfada birden fazla modal olunca işler karışıyor.
data-toogle ve js farkını bilmiyorum. Js olayına çok hakim olmadığımdan biyerleri kaçırıyorum diye düşünüyorum.
Diğer seçeneğe yöneliyorum.
Örneğin http://bootsnipp.com/snippets/featured/ ... p-lightbox burada bulunan lightbox'ı sayfama eklemem için css ve js kodlarını nereye eklemeliyim. Tarif eden olursa çok makbule geçer.
Bu örnek için şuanda sayfama html kodlarını yapıştırıyorum, css kodlarını kendi oluşturduğum css kütüphanesine yapıştırıyorum, js kodlarını da body yada head arasına yapıştırıyorum. resme tıkladığımda içi boş resimsiz küçük bir box geliyor.

Bugüne kadar hep video eğitimlerden yaptım benzer uygulamaları, bu konuda video eğitim bulamayınca gördüğünüz durumdayım :?
 
regulus11' Alıntı:
ceremy' Alıntı:
hangi bootstrap sürümünü kullanıyorsunuz normalde modal çalışıyor mu? bootstrap.js ekli olmayabilir .
data-toggle olarak değilde javascript ile çalıştırmayı denediniz mi?
Genişletmek için tıkla ...
Bootstrap 3.3.7 sanırım. Birkaç gün oldu indireli. bootstrap js ekli.
Normalde modal calısıyor. Hatta lightboxdan vazgectim resimleri modal ile açayım dedim. Ama galiba sayfada birden fazla modal olunca işler karışıyor.
data-toogle ve js farkını bilmiyorum. Js olayına çok hakim olmadığımdan biyerleri kaçırıyorum diye düşünüyorum.
Diğer seçeneğe yöneliyorum.
Örneğin http://bootsnipp.com/snippets/featured/ ... p-lightbox burada bulunan lightbox'ı sayfama eklemem için css ve js kodlarını nereye eklemeliyim. Tarif eden olursa çok makbule geçer.
Bu örnek için şuanda sayfama html kodlarını yapıştırıyorum, css kodlarını kendi oluşturduğum css kütüphanesine yapıştırıyorum, js kodlarını da body yada head arasına yapıştırıyorum. resme tıkladığımda içi boş resimsiz küçük bir box geliyor.

Bugüne kadar hep video eğitimlerden yaptım benzer uygulamaları, bu konuda video eğitim bulamayınca gördüğünüz durumdayım :?
Genişletmek için tıkla ...

Soruma cevap veriyorum;

css kodlarını bootstrap.css dosyasına
js kodlarını da bootstrap.js içerisine kopyaladım
ve sonuç olumlu! :+1:
 
regulus11' Alıntı:
regulus11' Alıntı:
ceremy' Alıntı:
hangi bootstrap sürümünü kullanıyorsunuz normalde modal çalışıyor mu? bootstrap.js ekli olmayabilir .
data-toggle olarak değilde javascript ile çalıştırmayı denediniz mi?
Genişletmek için tıkla ...
Bootstrap 3.3.7 sanırım. Birkaç gün oldu indireli. bootstrap js ekli.
Normalde modal calısıyor. Hatta lightboxdan vazgectim resimleri modal ile açayım dedim. Ama galiba sayfada birden fazla modal olunca işler karışıyor.
data-toogle ve js farkını bilmiyorum. Js olayına çok hakim olmadığımdan biyerleri kaçırıyorum diye düşünüyorum.
Diğer seçeneğe yöneliyorum.
Örneğin http://bootsnipp.com/snippets/featured/ ... p-lightbox burada bulunan lightbox'ı sayfama eklemem için css ve js kodlarını nereye eklemeliyim. Tarif eden olursa çok makbule geçer.
Bu örnek için şuanda sayfama html kodlarını yapıştırıyorum, css kodlarını kendi oluşturduğum css kütüphanesine yapıştırıyorum, js kodlarını da body yada head arasına yapıştırıyorum. resme tıkladığımda içi boş resimsiz küçük bir box geliyor.

Bugüne kadar hep video eğitimlerden yaptım benzer uygulamaları, bu konuda video eğitim bulamayınca gördüğünüz durumdayım :?
Genişletmek için tıkla ...

Soruma cevap veriyorum;

css kodlarını bootstrap.css dosyasına
js kodlarını da bootstrap.js içerisine kopyaladım
ve sonuç olumlu! :+1:
Genişletmek için tıkla ...
böyle yapmayın sakın bootstrap css ve js dosyalarına dokunmayın kendinize özel dosyalar oluşturun onları sayfadan çağırın ilerde işler çok karışır
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst