e Burada bu klasörlerin her birini açın ve ihtiyacımız öğeleri görebilirsiniz üzerinden taşımak İlk iki şey biz burada bizim bu css dosyasına üzerinde taşımak gerekir ve bu javascript dosyası biz de böyle yaparız üzerinde bu görüntüleri taşımak gerekir sadece gidiş ikinci pek çok ilk dosyayı tıklatın Denetim tuşunu basılı tutun ve bir sonraki dosya ikisi de sevmediğim tıklayın ve ardından ima öncesinde sağ Slyke tıklayın gitmek düzenlemek ve geri dönmek hayvan kopyalama Benim proje klasörüne ve ben sadece bir benim gf yıllar

dan sağ tıklayın yapacağız değilim javascript klasörü macun düzenlemek ve o iki yeni dosya yapıştırın Bu klasörün içine artık açıkça JavaScript dosyası buraya ait ama CSS yok dosya sanat benim CSS klasörüne değil yaz Drake o kadar yapar ve güncelleme çözümü tıklayın şimdi ışık kutusu var CSS ve lightbox gibi: uygun klasörlere ima do yanında beni ve o kapmak olduğunu görüntüleri bu sen görüntüleri olacak şimdi ihtiyacımız olacak aslında giderek Sayfada gördüğünüz bu senin gidiş için resimleri kendileri gerçek fiş teaser görüntüleri ile çalışıyor vardır Bazı benim framework a içine dönüş ve benim lightbox galeri klasör var ve ben tüm bunlar beş seçmeniz gerekir öğeleri ve bu kapatma düğmesi gelecek için sadece temelde görüntüleri önceki böylece ve bu yüzden ileri bazı hafif beş Hemen geri dönmek için düzenleme kopya hayvan tıklayın Benim proje klasörüne sağ resimlerin üzerine tıklayınız Güneş peso lightbox görüntüleri düzenleyin ve yapıştırmak için gidin doğrudan görüntüleri klasörüne bu yüzden şimdi biz gereken tüm malzemeyi var ama ben geri gitmek sekiz gideceğim benim amaya çerçeve klasörüne bir kez daha karşı Burada bir dosya orada olacak çünkü txt denilen ışık kutusu kodu ve daha sonra bu kurma talimatlar Sony, biz çalışma başlayabilir böylece yukarı öncesinde açık verileri go bu lightbox Burada ve daha sonra farklı adımlarda ima go ahead geri dönmek benim Proje klasörü anima benim hakkında dosyayı açmak ve tekrar Ben sadece burada yeni bir dosya oluşturulur ve sağ tarafı uygulamalı üzerine orada o amigo en açık buna şablon ve İşte Hakkında sayfa duyuyorum ve ben devam edin ve sağ bu görüntüleri koymak istiyorum Burada bu alanda bu yüzden benim lightbox koduna kadar txt içine şimdi gelir önde gidelim ve burada farklı adımlarda çalışmaya başlar Şimdi ilk adım aslında olduğundan emin olmaktır jQuery şüphe JS ve bir js dosyasına ışık kutusu HTML sayfasına eklenmiş Şimdi sen benim framework kullanıyorsanız veya yaptın kol halinde Zaten jQuery eklemek zorunda gidiyoruz önceki afiş kaymak Eğer senin bir şablona Ben burada gidiş kod gidiş Buraya kaydırma üstüne yukarı Çok kafa bölümü üst sağ görebilirsiniz jQuery bağlantı var ama kütüphanede kadar şu anda bir bağlantı yok Bu lightbox hurdaya için birileri devam ve bu seçip kopyalayın ve sonra benim Hakkında sayfasında bir dönüş Sadece biz gibi kafa bölümü için düzenlenebilir bölgede bu yerleştirmek gerekiyor yaptım Diğer eklentileri burada benim başlık benim düzenlenebilir içeride burada görebilirsiniz bölge butonu yazar uğrayacağı tıklayın ve biz istiyorum onun bu boş çevrimiçi içine kodu yapıştırın ve mümkün sağ tıklama veya düet paster ya sadece Kontrol sadece bir hızda bu komut içine olmak Burada bizim talimatlara geri geldi o sayfa Yapmamız gereken ikinci şey, biz ışık kutusu CS bağlamak ihtiyaç vardır Dosya ve o hakkı için kodu görebilirsiniz var yine devam edeceğim ve kopya geri gelmek Seni benim Hakkında sayfasına gitmek ve en tıklayınız biz sadece ekledi komut satırı sona erdi Burada bu boş satıra tekrar butonu tıklayın ve Ben başka gitmeden önce şimdi o linki yapıştırın istiyorum çift ​​tek sen burada görebilirsiniz olduğunu notları Kaynak zaten bu komut her ikisi için ayarlanmış hem de burada bu stil sayfası olarak Bir tuzak ve kaynak ve kaynak işaret görebilirsiniz ama lightbox .gs dosyasına o öyle JavaScript ve burada aynı şey o ne zaman CSS için içeride ışık kutusu CSS Eğer CSS veya javascript yerleştirmek karar verirseniz Biz onları yapıştırılan dışındaki başka bir klasöre Burada doğru yolu koymak gerekir gidiyoruz ve çok basit, sadece basitçe orada ne vurgulayın gelecektir gözatma bir tırnak işareti yazın Eğer enter tuşuna basın ve sadece bulalım Dosya bu durumda herhangi bir o JavaScript var Böyle sanatçılar yine emin olmanız gerekir bkz böylece klasör senin aslında doğru işaret olduğunu üzerine kalem go ahead ve söylemek ve sen doğru bu öğeleri bağladım söyleyebilirdi Konuya ilişkin dosya bölümünde işitme bakarak Şu anda kaynak kodu bakarak ben orada o HTML hakkında var bakın ama ben o tıklarsanız burada jQuery görebilirsiniz Eğer jQuery kütüphanesini görürsünüz Burada hiçbir şey ya da eğer yukarı gelirse hiçbir şey lightbox dat JS için geliyor veya lightbox dat CSS o zaman ölü kaynak yolu olduğunu biliyorum doğru kurmak değildi o yüzden analistler bu demek şimdi devam edelim Bir yangın Dr sadece kaydetmek ve geri dönelim ki Bizim talimatları içine ve bir sonraki öğeyi kurmak Bir sonraki am aslında eklenti aktive kodu Biri go ahead ve burada bu içeriği vurgulamak ve ben Copiah de gideyim ve ardından ima Hakkında sayfaya geri dönmek ve yine de ve biz burada bu düzenlenebilir bölgede eklenen öğe Ben butonu ve Blake hattında değilim Orada o komut yapıştırmak diğer ve her zaman devam edin ve burada ekstra satırları ekleyebilirsiniz dışarı sosyal alanlara Eğer tekrar istiyoruz ve biz gidip söylemek eğer böylece bugüne kadar önümüzde var biz jQuery emin yaptık Daha sonra bağlı kitaplık önümüzde var biz bağlı olduğunuz eklentisi olarak% uh komut yanı sıra eklenti için stil sayfası hurdaya olarak ve sonra biz kod ekledik ama aslında etkinleştirmek için gidiyor Bu eklenti Şimdi biz önde gitmek istiyorum ve bunu bir sonraki şey aslında görüntüleri hizmet olduğunu Eski galeriye gidiyor yani bunun için ne ihtiyacımız olacak biz gerçek ihtiyacımız olacak olan Eğer galeride dahil gidiyoruz görüntüleri diğer bir deyişle tam burada bu görüntüleri ihtiyacımız olacaksın bu yüzden görüntüyü ihtiyacım olacak konum tıklayın olduğunu Burada atlayacak Şimdi çerçeve ve bitmiş sevmiyorsan Bunun için bu için proje veya görüntü kadar size görüntüleri klasörü bulmak için gidiyoruz Bir SYRIZA örnek görüntüler burada AJ ödeme ile almak 1j etiketli ve biz aslında kullanmak önde gidiyoruz ne Bu galeri birkaç örnek görüntüleri bulmak gitmek ya da oluşturmak gerekecek değilse bir Birkaç örnek fotoğraflar Bu bir proje için ve ben onları yapacak Yaklaşık belki 500 piksel genişliğinde 300 piksel gibi daha derin bir şey, onları çok büyük yapmayın Armando ya onları çok küçük hale bu yüzden biz burada bu görüntüleri var ve onlar için hazırsınız gidin ve ima go ahead yapmak sonraki şey dönüş üzerinde Benim talimatlara buraya inç ve burada kod burada görebilirsiniz Gerçek lightbox biz oluşturmak için gidiyoruz Bazı go ahead ve kopyalamak olduğunu seçin ve sonra ben de devam edin ve içine gidiyorum Yine hayvan önce sayfa hakkında ve aşağı kaydırma ve benim içerik alanındaki burada biz burada var içeriğini görebilirsiniz Çift alt pozisyon paragraf içinde benim ana başlık var ve ben aslında bu galeri görünmesini istediğiniz Burada bu iki paragraf arasında dedi ilk paragrafı ve hoppala satmak gürlemesi dışında bu ne I'mma yaparım devam edeceğim olduğunu var butonu onların kendime boş bir satır verecek Bu iki paragraf arasında Anna Miller tempolu go-ahead hit o örnek kod ve aslında Sadece kendime biraz daha fazla yer vermek onların girin Vurgulanan ve üzeri sekmesi bunu var Şimdi hemen yalnızca bir görüntü olması oluyor Bu galeride içinde şimdi galeri kendi sevgili ve geyik olması gerekir uh galeri kimliği% olmalıdır olacak Şimdi başka bir yol kadar bir ayar bu vardır ve ben burada bu talimatları aşağı içerir ama bu genellikle Bunu yapmanın en kolay yolu bu yüzden ben burada bir anlaşma olduğundan emin yaptık ve ben onun kimliği galeri yaptım var iki satır burada vardır bir çapa Terry ve görüntü teknoloji Burada bu resim etiketi görmeye gidiyoruz Ben üzerinde kaydırma tarafından alınan dönümlük üzgünüm Burada insert fotoğraf yolunu olduğunu ve sonra bir sonraki insert fotoğraf yolunu diyor Sağ yanı ama bundan sonra buraya Bu ikinci satırda yer Eğer burada yükseklik deyimi ile bir var Bu tam boy sürümünü öğrenmek gidiyor çizgidir resminizin seviyorum ve bu hat olacak O küçük küçük resim oluşturmak için gidiyor görüntü hem dokunaklı çuval aynı dosya olmalı aşk Küçük resim boyutunu azaltarak sadece oluşturulan çünkü Burada yüksek bir koyarak gerçek görüntü kadar ve ben o boyutlarını ayarlamak olabilir seksen tarafından 120 seçti böylece küçük resimler görünür ve büyüklükte görüntüleri sadece kesinlikle can için bkz optimum kol Burada yüksek sekiz our view küçük olan ama ne gitmek önde ve yapmak gerekiyor Önünüzde gitmek gerekiyor ise ve aslında geçmiş koymak görüntü için orada O her şeyi vurguladık görebilirsiniz tırnak işaretleri dahil orada tırnak içinde ve sonra ben devam edin ve başka çekilme yazın gidiş kaçırmak ve göreceksiniz benim kaşlar seçeneği çıkageldi Bizim enter tuşuna basın ve içine gelecekler ediyoruz senin seçme Dosya iletişim kutusu ben sol son yer, çünkü şimdi ben JavaScript dosyasında kulüpler bizim ama öncesinde bir seviye benim kadar hızlı gitmek istiyorum ama burada klasör beraber Bunun üzerine yeşil simge ve sonra benim görüntüleri olduğunuzdan emin olun klasörünü görebilirsiniz senin Proje klasörü burada benim görüntüleri klasörü var cehennem burada aşağı doğru ilerleyin ve ben olacak go ahead ben ilk görüntü var ve kullanım ve bu tam boyutlu sürümünü görebilirsiniz Tamam'ı tıklatın ve devam ettim ve koyun Orada tam aynı şeyi yapmak gerektiğini saniye ben her şeyi vurgulamak istiyorum tırnak işaretleri arasında orada tırnak işaretleri dahil ve daha sonra bir teklifi yazın Tarayıcınız seçeneği gitmek butonu tıklayın ve sen ruh aynı görüntü konum bu nedenle Paşa için aynı olması sonra tekrar genişliğini ve yüksekliğini ayarlayabilirsiniz Bu değerleri değiştirerek çıkageldi diğer küçük resim görüntü için burada başlık ve Illinois bir görüntüyü tıklatın burada bitmiştir projeyi getirmek görüntü için başlık bu orada başlık vergi oranı olduğunu söylüyor Tam burada içeriyor ise bizim Önünüzde değiştirilmiş s gidebilir başlık özel başlık var ve ben sadece başlığı yazın önde gideceğiz kulüpler ilk görüntü can galeri için ne istersen yazabilirsiniz içinde onların eve gitmek önde ve bu demek ve şimdi önümüzdeki gidelim Bu aslında üzerinde çalışıyor ve eğer devam edin ve benim tıklayınız Açılan öğe sağ krom bir önizleme var Animus Ansgar orada görüntünün önizlemesini getirmek bir saat benim sayfa ve benim görüntü var Eğer seksen tarafından 120 ° boyutlu görebilirsiniz Bunu tıkladığınızda ben tam boy sürümünü almalısınız yukarı orada görüntü görünür Sık sık geri gelip Glenn Close Benim sayfa ve yine biz sadece şu anda orada bir görüntü var ama bu galeri sayısında olduğu gibi birçok görüntü eklemek ne olabilir Onu burada kod görünümünde geri gelmek tekrar benim galeri var geyik görebilirsiniz ve iki satır orada sırayla ilave görüntüler eklemek için bu Yapmanız bu iki satır vurgulamak olduğunu bunları kopyalamak ve sonra devam edin ve onlar hiç bu ekstra alan yaratmak Ulusal ve sahip oldukları Burada bu tahta üzerinde o hattı yapacağız devam edin ve orada tekrar o yapıştırmak olduğunuzu sen devam et ve seride sonraki görüntüye işaret eder ve bazen gerçekten yararlı yapmak bir şey yukarı Bu ayar ve galeriler Bu büyük galeriler gerçekten daha açıklayıcı isimler için işe yaramayabilir ama sadece benim görüntüleri 1,2,3,4,5 testere adlı benzeri ve bu yüzden çabuk gerçekten kullanmak buraya gelip değişiklikler iki edebilirsiniz ve sonra ben önde gidebilir ve yine orada bir tane yapıştırın evet aynı kod kopyaladığınız vardı ve ben adlandırabilir o zaman Üç yüzden şimdi üç görüntüleri var Benim galeri yüzden izin de en önde gidip Chrome'da bu check out Bu işe benim üç resim var gitmem orada nasıl ve orada bir daha ve ben i ç görüntü duyuyorum dedi Şimdi hemen bu görüntüler ayarlanır blok seviyesinden elemanlar olarak onlar istifleme konum bu yüzden Bizim örnekteki birinin üstüne diğerine aslında onlar aslında burada dizilmiş konum başka bir üstünde istifleme bu yüzden go ahead CSS dosyasında bu değişiklik yapalım Buraya gitmek önde olduğunu en aza indirmek ve Dreamweaver şimdi bazı yeşil ışık içinde senin benim lightbox tut içine CSS Burada dışarı ve ben altta aşağı değilim galerisi stilleri ima altında stil sayfası go ahead ve bir stil yaratmak Anne McCartt galerisi ve bu içindir Bir etiketler: ve galeri içimde şamandıra bu istiyorum kendim alan Suudiler sola akmaya ve bazı diğer stilleri burada orada görebilirsiniz % uh senin galeri gibi bakar şekilde etkileyecektir genel galeri kadar olan bir çok geniş çağrı çok dar sayfa size iseniz şimdi değiştirmek gerekebilir ve burada tek tek görüntüler için bazı değer ve vurgulu üstüne üzerinde etkiler bu yüzden biz önde gitti ve ben süzülüyor sola üzerindekiler 8a görüntüleri Ben devam edin ve tüm kurtarmak Bütün bu sağ tıklayın kaydetmek ediyorum ve ima Tasarım görünümünde benim kaynak koduna gel ve artık görüntülerin görmelisiniz oran ortaya çıkıyor onların vardı Seni yaşamak Ben go ahead dışı içine giderseniz fark edebilirsiniz Bu metin burada bu alana kadar yüzen olduğunu ama aslında olduğunuzda yapıyor olmamalı Canlı Görünüm veya bir tarayıcıda yıl önizleme zaman Senin için bunu eğer basit bir şekilde etrafta var go ahead a birileri burada kapatmak rad ve buraya gel Temelde bu sarma alıyorsanız eğer ve neler yapabileceğini boşluğu genişletmek ya da burada herhangi bir diğer görüntü üzerinde bu itmek veya sizinle kod gidiyor ve Burada benim son görüntü ve ben ne yapabilirim Bu son görüntünün sonra bir fren koyabilirsiniz olduğunu Burada ve birileri go ahead ve dışında benim diem ve ben önde yapmak gideyim Orada let etiketi oranı bir mola ve onlar olduğunu söylüyorlar olacak ve ben şimdi ben karar gidiyor sağlar ve şimdi o oraya itti olduğunu görmelisiniz Aslında benim canlı sizi baktığınızda ve siz de görürsünüz ve yine sizin CSS gidebiliriz ve daha fazla alan burada sağ orada var Sonra orada burada ama bunu değiştirmek için bir CSS kuralını oluşturabilir veya hatta belki orada sadece biraz aşağı taşımak için ikinci bir fren etiketi koymak sadece bile arayan gibi CSS oldu ya da sadece koyarak ekstra mola en go ahead ve bizim galeri burada çalıştığından emin olun testi izin Ben krom son bir kez bu kadar getireceğim ve önce ve yine biz gerektiği Her zaman tüm sayfaları test Bizim tüm tarayıcılarla ben burada Firefox kadar getireceğim ve whoops ateş daha büyüktür ve o olacak boyutlandırmak devam Bitten bir Firefox içinde çalışıyor nasıl görelim Tüm görüntüler aslında orada çalıştığından emin olun ve en go ahead ve yapalım Internet Explorer ve bu yüzden burada ve güvenlik ayarlarına bağlı olarak buraya size gerekebilir Engellenen içeriğe izin söylüyorlar Orada benim ışık kutuları vardır ve onlar Internet Explorer'da çalışıyoruz konum ve yine büyük bir akım ihmalkâr Test, bu ihtiyacı olduğu gerçeğini vurgulayan tüm farklı tarayıcılarda ama istediğini de Safari'de bu yaparsınız ve muhtemelen de opera biz görebilirsiniz bu resized olmuştu Burada Safari ve duyuyorum onların Benim öğe yüzden bu test emin yapmak gibi iyi çalışır tüm popüler tarayıcılar önemli böylece görüntülerin basit bir lightbox galeri kurmak için yapmanız gereken tek şey içinde web sitenizi kol var Bir sonraki videoda yapacağız öncesinde iş yerinde yayınlanan gitmek konum Onların rezervasyonları sayfa basit kurmak için gidiyorum insanlar rezervasyonları göndermek için form vardır Ben sonraki video görürsünüz.