javascript gelismis popup

Başlatan yeninesil, 13 Haz 2016, 15:14

« önceki - sonraki »

0 Üyeler ve 2 Ziyaretçiler konuyu incelemekte.

yeninesil

demo görmek için tıkla

örnek 1 kodları
<a href="http://images.123hdwallpapers.com/20150526/tumblr-trees-backgrounds-1280x720.jpg" popup="">ağaç</a>örnek 2 kodları
<img width="200px" src="http://science-all.com/images/wallpapers/wallpaper-tumblr/wallpaper-tumblr-21.jpg" alt="" popup="">örnek 3 kodları
<a href="http://youtu.be/wrk3y6SPLDU" popup>Nightcore - The Sons of Odin [HD]</a>
        <br>
        <a href="https://www.youtube.com/watch?v=wrk3y6SPLDU" popup>Nightcore - The Sons of Odin [HD] (youtu.be link)</a>
örnek 4 kodları
<button popup="#deneme">pop aç (#deneme seçicisini açar)</button>
        <div id="deneme" style="display:none;">Deneme Seçicisinin içeriği</div>


aşağıdaki kodları popup.js isminde kaydedip body öncesine ekleyin

kodlar
'use strict';
var config = {
blackFrame        : true,
background        : '#000',
backgroundOpacity : '0.8',
removeIconColor   : '#dcdcdc',
esc               : true
};
function popupInit(){for(var e=document.querySelectorAll("[popup]"),t=0;t<e.length;t++)e[t].addEventListener("click",function(e){e.preventDefault();var t=this;t.getAttribute("popup")&&(t=document.querySelector(t.getAttribute("popup"))),popOpen(t)})}function fadeIn(e,t,o){if(e)if(o=o||1,e.style.opacity=0,e.style.filter="alpha(opacity=0)",e.style.display="block",e.style.visibility="visible",t)var i=0,n=setInterval(function(){i+=50/t,i>=o&&(clearInterval(n),i=o),e.style.opacity=i,e.style.filter="alpha(opacity="+100*i+")"},50);else e.style.opacity=1,e.style.filter="alpha(opacity=1)"}function fadeOut(e,t){if(e)if(t)var o=1,i=setInterval(function(){o-=50/t,0>=o&&(clearInterval(i),o=0,e.style.display="none",e.style.visibility="hidden"),e.style.opacity=o,e.style.filter="alpha(opacity="+100*o+")"},50);else e.style.opacity=0,e.style.filter="alpha(opacity=0)",e.style.display="none",e.style.visibility="hidden"}function getPageSize(){var e,t;window.innerHeight&&window.scrollMaxY?(e=document.body.scrollWidth,t=window.innerHeight+window.scrollMaxY):document.body.scrollHeight>document.body.offsetHeight?(e=document.body.scrollWidth,t=document.body.scrollHeight):(e=document.body.offsetWidth,t=document.body.offsetHeight);var o,i;self.innerHeight?(o=self.innerWidth,i=self.innerHeight):document.documentElement&&document.documentElement.clientHeight?(o=document.documentElement.clientWidth,i=document.documentElement.clientHeight):document.body&&(o=document.body.clientWidth,i=document.body.clientHeight);var n,l;return l=i>t?i:t,n=o>e?o:e,[n,l,o,i]}function getObjSize(e){var t,o,i=window.getComputedStyle(e),n=i.display,l=i.position,d=i.visibility;return"none"===n&&(e.style.position="absolute",e.style.visibility="hidden",e.style.display="block"),"IMG"==e.tagName?(t=e.naturalWidth,o=e.naturalHeight):(t=e.getBoundingClientRect().width,o=e.getBoundingClientRect().height),"none"===n&&(e.style.display=n,e.style.position=l,e.style.visibility=d),[t,o]}function createPopup(e){var t,o=e.outerHTML,i=getObjSize(e);if("A"==e.tagName){var n,l=e.getAttribute("href");if(n=getYoutubeId(l))o=showYoutubeVideo(n),t=scaleSize(560,315);else{if(isImage(l)){preloadImage(l);return!1}""==l?(o="<center>Adres bulunamadı!</center>",t=scaleSize(400,25)):t=scaleSize(i[0],i[1])}}else t=scaleSize(i[0],i[1]);document.getElementsByClassName("popupBody")[0].innerHTML=o,resize(t.width,t.height,t.top)}function scaleSize(e,t){var o,i,n=30,l=getPageSize();if(o=l[2]-20,i=l[3]-120,e>o||t>i){var d=Math.min(o/e,i/t);return{width:e*d,height:t*d,top:n}}return n=(i-t)/2-30,{width:e,height:t,top:n}}function preloadImage(e){var t;return t=new Image,t.src=e,t.onload=function(){document.getElementsByClassName("popupBody")[0].innerHTML=t.outerHTML;var e=scaleSize(t.naturalWidth,t.naturalHeight);resize(e.width,e.height,e.top)},t.onerror=function(){alert()},t}function resize(e,t,o){var i=document.getElementById("popup"),n=i.getElementsByClassName("popupContent")[0],l=n.getElementsByClassName("popupBody")[0];i.style.top=o+"px",n.style.width=e+12+"px",n.style.height=t+50+12+"px",l.querySelector("*").style.display="block";for(var d=l.getElementsByTagName("img"),r=0;r<d.length;r++)d[r].style.width="100%"}function background(){document.querySelector("body").insertAdjacentHTML("beforeend",'<div id="popup_kararti" style="width:100%; height:100%; position:fixed; top:0; left:0; background:'+config.background+'; display:none; z-index:9998;"></div>'),fadeIn(document.getElementById("popup_kararti"),500,config.backgroundOpacity),document.querySelector("body").style.overflow="hidden"}function popOpen(e){var t='<div id="popup" style="position: fixed;top:0px; bottom: 0px; left: 0px; right: 0px;z-index:9999;"><div class="popupContent" style="position: relative; margin: 0px auto; box-sizing: content-box; display: block; overflow: auto; opacity: 1; visibility: visible;"><div id="popClose"><div style="position: relative;font-size: 50px; padding-right: 5px; line-height: 1; float: right;cursor: pointer;color: '+config.removeIconColor+';">Ãâ€"</div><div style="clear:both;"></div></div><div class="popupBody" style="padding: 6px; background-color: #fff; border-radius: 8px;"></div></div></div>';document.querySelector("body").insertAdjacentHTML("beforeend",t),createPopup(e),background(),popClose()}function isImage(e){return e.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)}function getYoutubeId(e){var t;return t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/),t&&11===t[2].length?t[2]:!1}function showYoutubeVideo(e){var t,o;return o=560,t=o/(560/315),showVideoIframe("//www.youtube.com/embed/"+e+"?badge=0&autoplay=1&html5=1",o,t)}function showVideoIframe(e,t,o){return o=o||t,'<div style="position: relative; display: block; height: 0; padding: 0; padding-bottom: 56.25%; overflow: hidden;"><iframe width="'+t+'" height="'+o+'" src="'+e+'" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0;"></iframe></div>'}function popRemove(){fadeOut(popup,500),popup.remove(),document.getElementById("popup_kararti").remove(),document.querySelector("body").style.overflow="auto"}function popClose(){document.getElementById("popup_kararti").addEventListener("click",popRemove),document.getElementById("popClose").addEventListener("click",popRemove),document.getElementById("popup").addEventListener("click",function(e){"popup"==e.target.getAttribute("id")&&popRemove()}),document.onkeydown=function(){var e=event.keyCode;27==e&&popRemove()}}popupInit();


tarantula901

Çok güzel bir çalışma teşekkür etmeyi unutmuşum  yuhphii
Sitenizde işlem yapmadan önce mutlaka yedek alın, yedek alın yedek almayı unutmayın her şeyden önce bu önemli

Pm'den ve Skype'den istenilen destekler ücretlidir. Ücret ödememek için lütfen sitede sorunuzu konu açarak sorabilirsiniz.

Ücretli Smf Destek İçin

BrainDamaged

Merhabalar hocam, 1 örnekteki şekilde ekleme yapıyorum lakin direkt fotoğraf açılmakta

Kodlar;
<a id="smf_autov_username_link" href="https://i.hizliresim.com/4aXRgG.png" popup="">
<i class="fa fa-info-circle fa-lg" style="color: #ebebeb; padding: 0 1px;"></i>
</a>

Head kısmına ekledim kod;
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/popup.js?fin20"></script>

Temanın içerisindeki scripts dosyasına popup.js adlı bir dosya oluşturdum, diğer örnekleride denedim

BrainDamaged

Yardımcı olabilir misiniz hocam ?

Jadestein

Alıntı yapılan: BrainDamaged - 04 Eyl 2018, 00:00Yardımcı olabilir misiniz hocam ?
https://jsfiddle.net/2oq41tca/

Sizin kodunuz ile çalışmakta sitenizde bir şey çakışıyor yada eklerken bir hata yapıyorsunuz.

BrainDamaged

index.template.php dosyasında popup.js'yi belirttim ardından register.template.php dosyasına ikonumu ekledim lakin üzerine tıkladığımda direkt resim gösteriliyor hocam

[IMG]https://resmim.net/f/IbbvS4.png[/img]


Kayıt Alanındaki kodlarım;

<dd>
<input class="veo-username-logged" placeholder="Kullanıcı Adı" type="text" name="user" id="smf_autov_username" size="30" tabindex="', $context['tabindex']++, '" maxlength="25" value="', isset($context['username']) ? $context['username'] : '', '" class="input_text" />
<span id="smf_autov_username_div" style="display: none;">
<a id="smf_autov_username_link" href="https://i.hizliresim.com/4aXRgG.png" popup="">
<i class="fa fa-info-circle fa-lg" style="color: #ebebeb; padding: 0 1px;"></i>
</a>
</span>
</dd>

index.template.php dosyasına eklediğim kod;
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/popup.js"></script>

Jadestein

js yi index.template.php </body> öncesine ekleyin önüne başka js geçmesin.

BrainDamaged

#7
Alıntı yapılan: Jadestein - 04 Eyl 2018, 13:26js yi index.template.php </body> öncesine ekleyin önüne başka js geçmesin.

Yardımcı olduğunuz için teşekkür ederim,