4. Bölüm: Editör Araçları

4.13. Lightbox Efekti

“Lightbox Efekti”, bir metin veya resme tıklandığında resim, video veya ses içeren bir iletişim kutusu açılmasını sağlar. eXe 2.6 sürümünden bu yana, EducaMadrid medya kitaplığından videolar da Lightbox efektine eklenebilir.

 

Örnekler

“Lightbox Efekti”nin nasıl çalıştığını görmek istiyorum.

Nasıl Yapılır?

1.Görüntüye Resim Ekleme:

  • Öncelikle kullanacağınız resmi ekleyin.
  • Eklenen resmi seçin ve “Bağlantı Ekle” düğmesine tıklayın.
  • “URL” kısmından görseli tekrar seçip (bilgisayardan veya harici bağlantıdan) ekleyin.
  • Rel alanından “Lightbox” seçeneğine tıklayın.

2.Resim veya Metne Video Ekleme:

  • Kullanacağınız resmi ekleyin veya metni yazın.
  • Eklenen görüntüyü veya metni seçip “Bağlantı Ekle” düğmesine tıklayın.
  • “URL” alanına, YouTube videosunun URL’sini yapıştırın.
  • Rel alanından “Lightbox” seçeneğine tıklayın.

3.Resim ve Video Galerisi:

  • Öncelikle kullanacağınız resmi ekleyin.
  • Eklenen resmi seçin ve “Bağlantı ekle” düğmesine tıklayın.
  • “URL” alanından, resmi yeniden seçin veya YouTube videosu için URL yapıştırın.
  • Gelişmiş sekmesi > Sayfa’dan hedef ilişkisine her bir resim için “Lightbox” seçeneğine tıklayın.
  • Kaynak kod düzenleyicisini açın ve her rel =”lightbox” etiketinin parantezleri arasına aynı sayıyı koyun.

Yani dizi şöyle olsaydı:

<a href=”actividad_generica_engranaje.png” rel=”lightbox” title=”Engranaje”>

<img src=”actividad_generica_engranaje.png” width=”200″ height=”200″ /></a>

<a href=”actividad_generica_estrella.png” rel=”lightbox” title=”Estrella”>

<img src=”actividad_generica_estrella.png” width=”200″ height=”200″ /></a>

<a href=”https://www.youtube.com/watch?v=cI61i-fgkek&amp;list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&amp;

index=1″ title=”Vídeo de eXeLearning” rel=”lightbox”>

<img src=”actividad_generica_exe.png” width=”200″ height=”200″ /></a>

 

Sonuç şöyle olurdu:

<a href=”actividad_generica_engranaje.png” rel=”lightbox[1]” title=”Engranaje”>

<img src=”actividad_generica_engranaje.png” width=”200″ height=”200″ /></a>

<a href=”actividad_generica_estrella.png” rel=”lightbox[1]” title=”Estrella”>

<img src=”actividad_generica_estrella.png” width=”200″ height=”200″ /></a>

<a href=”https://www.youtube.com/watch?v=cI61i-fgkek&amp;list=PLgnSGd4uwSUn8o_f31_ZCsB_mM2Q1tDII&amp;

index=1″ title=”Vídeo de eXeLearning” rel=”lightbox[1]”>

<img src=”actividad_generica_exe.png” width=”200″ height=”200″ /></a>

 

 

Lisans

Creative Commons Atıf-Gayri Ticari-Türetilemez 4.0 Uluslararası Lisansı için ikon

eXeLearning ile Etkileşimli İçerik Geliştirme Copyright © 2023 by Boğaziçi Üniversitesi Dijital Eğitim Koordinatörlüğü is licensed under a Creative Commons Atıf-Gayri Ticari-Türetilemez 4.0 Uluslararası Lisansı, except where otherwise noted.

Bu Kitabı Paylaş