Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Javascript Kod Sorunu hk.

Konu, 'Javascript' kısmında frt_16 tarafından paylaşıldı.

  1. frt_16

    frt_16 Üye

    Kayıt:
    16 Şubat 2009
    Mesajlar:
    89
    Beğenilen Mesajlar:
    0
    Merhaba arkadaşlar hayırlı pazarlar,

    bi galeri oluşturuyorum sevdiğim bir galeri eklentisi de var bilirsiniz belki lightgallery.js bunu kullanmak istiyorum ancak aşağıdaki gibi çağırmam gerekiyor ama çalışmıyor yardımcı olabilir misiniz rica etsem

    Kod:
    <!DOCTYPE html><html lang='en' class=''>
    <head>
    <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css'>
    <style class="cp-pen-styles">
    .demo-gallery > ul {
      margin-bottom: 0;
      padding-left: 15px;
    }
    
    .demo-gallery > ul > li {
      margin-bottom: 15px;
      width: 180px;
      display: inline-block;
      margin-right: 15px;
      list-style: outside none none;
    }
    
    .demo-gallery > ul > li a {
      border: 3px solid #FFF;
      border-radius: 3px;
      display: block;
      overflow: hidden;
      position: relative;
      float: left;
    }
    
    .demo-gallery > ul > li a > img {
      -webkit-transition: -webkit-transform 0.15s ease 0s;
      -moz-transition: -moz-transform 0.15s ease 0s;
      -o-transition: -o-transform 0.15s ease 0s;
      transition: transform 0.15s ease 0s;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      height: 100%;
      width: 100%;
    }
    
    .demo-gallery > ul > li a:hover > img {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    
    .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
      opacity: 1;
    }
    
    .demo-gallery > ul > li a .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.1);
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: background-color 0.15s ease 0s;
      -o-transition: background-color 0.15s ease 0s;
      transition: background-color 0.15s ease 0s;
    }
    
    .demo-gallery > ul > li a .demo-gallery-poster > img {
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;
      opacity: 0;
      position: absolute;
      top: 50%;
      -webkit-transition: opacity 0.3s ease 0s;
      -o-transition: opacity 0.3s ease 0s;
      transition: opacity 0.3s ease 0s;
    }
    
    .demo-gallery > ul > li a:hover .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    .demo-gallery .justified-gallery > a > img {
      -webkit-transition: -webkit-transform 0.15s ease 0s;
      -moz-transition: -moz-transform 0.15s ease 0s;
      -o-transition: -o-transform 0.15s ease 0s;
      transition: transform 0.15s ease 0s;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      height: 100%;
      width: 100%;
    }
    
    .demo-gallery .justified-gallery > a:hover > img {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    
    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
      opacity: 1;
    }
    
    .demo-gallery .justified-gallery > a .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.1);
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: background-color 0.15s ease 0s;
      -o-transition: background-color 0.15s ease 0s;
      transition: background-color 0.15s ease 0s;
    }
    
    .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;
      opacity: 0;
      position: absolute;
      top: 50%;
      -webkit-transition: opacity 0.3s ease 0s;
      -o-transition: opacity 0.3s ease 0s;
      transition: opacity 0.3s ease 0s;
    }
    
    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    .demo-gallery .video .demo-gallery-poster img {
      height: 48px;
      margin-left: -24px;
      margin-top: -24px;
      opacity: 0.8;
      width: 48px;
    }
    
    .demo-gallery.dark > ul > li a {
      border: 3px solid #04070a;
    }</style></head><body>
    
    <button type="button" onClick="haberDetayAc(302)">gonder</button>
    <div style="background-color: yellow;" id="dynamic">Gonder</div>
      <div class="demo-gallery">
        <ul id="lightgallery">
        </ul>
    
      </div>
    
    <script src='https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js'></script>
    <script src='https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js'></script>
    <script src='https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js'></script>
    <script src='https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js'></script>
    <script src='https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js'></script>
    <script src='https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js'></script>
    <script src='https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js'></script>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script >lightGallery(document.getElementById('lightgallery'))
    </script>
    
    <script>
    function haberDetayAc(id){
        
               var resimnewChild = '<li data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg" data-sub-html="aciklama"><a href=""> <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg"> <div class="demo-gallery-poster"><img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png"></div></a></li>';  
              $("#lightgallery").html(resimnewChild);
          }
    </script>
    </body></html>
     
  2. frt_16

    frt_16 Üye

    Kayıt:
    16 Şubat 2009
    Mesajlar:
    89
    Beğenilen Mesajlar:
    0
    Arkadaşlar lütfen yardımcı olabilir misiniz sanki javascript çalışmıyor gibi div içine yazdırılıyor dosyya ama galeri fonksiyonu javascript tarafından görevi yerine getirilemiyor galiba Allah rızası için birisi yardımcı olabilir mi?
     
  3. MaviAteş

    MaviAteş Aktif Üye

    Kayıt:
    23 Mart 2007
    Mesajlar:
    440
    Beğenilen Mesajlar:
    5
    Meslek:
    Bilgisayar Sistemleri Öğretmeni
    Şehir:
    Başakşahir, İstanbul
    Düğmeye bastıktan sonra resim geliyor. Sonra ne olmasını istiyorsunuz. galeri fonksiyonu dediğiniz şey nedir?