Facebook Responsive Lightbox

Developer
Ayhan ALTINOK
Size
4,661 Kb
Views
20,240
  1. Facebook Responsive Lightbox Previews
  2. Facebook Responsive Lightbox HTML Codes
  3. Facebook Responsive Lightbox CSS Codes
  4. Facebook Responsive Lightbox JS Codes

How do I make an facebook responsive lightbox?

Facebook Responsive Lightbox alanı. What is a facebook responsive lightbox? How do you make a facebook responsive lightbox? This script and codes were developed by Ayhan ALTINOK on 13 September 2022, Tuesday.

Facebook Responsive Lightbox Previews
IQ Test

Facebook Responsive Lightbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook Responsive Lightbox </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="info">	<img src="http://a66c7b.medialib.glogster.com/deniz48/media/80/8095c121260ed8f620e82bbdc6dda0477c7994d5/facebook-logo-png-51-197221035.png"height="50px"><br>	<img src="https://t0.gstatic.com/images?q=tbn:ANd9GcSbnYxkvhJdwMmfV7E96qNK6tegp-05Gw1J9DG8ACjcQBlA5oflVQ">
<h1> Facebook Tarzı Responsive Lightbox</h1>
<h3> Yakında Slider kısmınıda eklenecektir</h3>
<p>Daha fazla çalışmalar için <a href="www.ayhanaltinok.com"> wwww.ayhanaltinok.com</a> sitesini ziyaret edebilir takip edebilirsiniz.</p> <div class="btn btn-default goster"><i class="fa fa-eye"></i> Göster</div>
</div>
<!------------------------------------------------- Responsive Lightbox - Başı ------------------------------------------------->
<div id="lightbox">	<div class="container">	<!---İçerik Alanı - Başı --->	<div class="col-md-8 bg" style="background: url(http://takedesigns.com/wp-content/uploads/2013/11/blue_fire_deviantart_zippo_depth_of_field_lighters_desktop_1280x1024_hd-wallpaper-1037529.jpg); ">	<div>	<p> Ayhan ALTINOK</p>	<ul >	<li><a href="#"><i class="fa fa-bars"></i> <span>Seçenekler </span></a></li>	<li><a href="#"><i class="fa fa-share-alt"></i> <span>Paylaş </span></a></li>	<li><a href="#"><i class="fa fa-share-square-o"></i> <span>Gönder </span></a></li>	<li><a href="#"><i class="fa fa-heart"></i> <span>Beğen </span></a></li>	<li class="yorumAc"><a href="#"><i class=" fa fa-commenting-o"> </i> <span>Yorumlar </span></a></li>	</ul>	</div>	</div>	<!---İçerik Alanı - Sonu --->	<!---Yorum & İçerik Alanı - başı --->	<div class="col-md-4 comment animated">	<!---Bilgi - başı --->	<i class="yorumKapat fa fa-times-circle fa-2x"></i>	<div class="head">	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/56959/profile/profile-80_1.jpg"height="50px">	<h4>Ayhan ALTINOK</h4>	<p>18 Ağustos 2015</p>	</div>	<p>Back/Front End Developer</p>	<!---Bilgi - sonu --->	<!---Butonlar - sonu --->	<div class="buton">	<span><a href="#"><span>Beğen</span></a></span> ·	<span><a href="#"><span>Yorum Yap</span></a></span> ·	<span><a href="#"><span>Beğen</span></a></span>	</div>	<!---Butonlar - sonu --->	<!--- Yorumların - Başı --->	<ul>	<li>	<div>	<img src="http://gravatar.com/avatar/35ae241003fffc71567781e3ecdb3b05?s=80" height="35px">	<a href="https://codepen.io/AyhanALTINOK">Ayhan ALTINOK</a>	<ul class="fa-ul">	<li><i class="fa-li fa fa-map-marker"></i>Eskişehir</li>	<li><i class="fa-li fa fa-history"></i>12 saniye önce</li>	</ul>	</div>	<p>Merhaba dünya :D</p>	</li>	<li>	<div>	<img src="http://gravatar.com/avatar/35ae241003fffc71567781e3ecdb3b05?s=80" height="35px">	<a href="https://codepen.io/AyhanALTINOK">Ayhan ALTINOK</a>	<ul class="fa-ul">	<li><i class="fa-li fa fa-map-marker"></i>Eskişehir</li>	<li><i class="fa-li fa fa-history"></i>12 saniye önce</li>	</ul>	</div>	<p>Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı Test yazısı </p>	</li>	</ul>	<!--- Yorumların - sonu --->	<!--- Yorum yazma formu - başı--->	<form class="yrm">	<div class="form-group">	<div class="input-group">	<div class="input-group-addon"></div>	<input type="text" class="form-control" id="exampleInputAmount" placeholder="Yorumuzu Yazın">	</div>	</div>	</form>	<!--- Yorum yazma formu - sonu --->	</div>	<!---Yorum & İçerik Alanı - başı --->	<div>
<div>
<!------------------------------------------------- Responsive Lightbox Alanı - Sonu -------------------------------------------------> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Facebook Responsive Lightbox - Script Codes CSS Codes

html,body{height:100%;margin:0;padding:0;font-size:13px;}
#clear{clear:both;}
/*------------------------------- Facebook tarzı responsive lightbox alanı -----------------------*/
/*---------------------------- ileriki aşamalarda slider kısmınıda yapacağım ----------------------------*/
#lightbox{display:none;	background-color: rgba(0, 0, 0, .9);	width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;text-align:left;}
#lightbox>.container{padding:0;	background-color:#fff;width:90%;overflow:hidden; height:70%;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;}
#lightbox>.container>div{margin:0;padding:0;height:100%;}
#lightbox>.container>.bg{ background-color:black !important;background-size: contain !important; background-position:center center !important; background-repeat: no-repeat !important;}
#lightbox>.container>.bg>div{position:absolute;bottom:0;background-color:rgba(0,0,0,0.5);width:100%;}
#lightbox>.container>.bg>div>p{float:left;font-weight:bold;color:#fff;margin:0;padding:15px; display: inline-block; vertical-align: middle; line-height: normal; }
#lightbox>.container>.bg>div>ul{float:right;}
#lightbox>.container>.bg>div>ul,.container>.bg>div>ul>li{list-style:none;margin:0;padding:0;display:inline-block;}
#lightbox>.container>.bg>div>ul>li{border-left:solid 1px rgba(0,0,0,0.2);}
#lightbox>.container>.bg>div>ul>li>a{padding:15px ; margin:0!important;display: inline-block; vertical-align: middle; line-height: normal; font-size:13px; font-weight:bold;color:#aaa;}
#lightbox>.container>.bg>div>ul>li>a:hover{color:#fff;}
#lightbox>.container>.comment{background-color:#fff;padding:15px;display:block;overflow-x:auto; }
#lightbox>.container>.comment>.yorumKapat{display:none;cursor:pointer;width:100%;background-color:#fff;color:#FF3737;text-align:center;padding:10px;border-bottom:1px solid #ddd;position:absolute; top:0px;z-index:9999;left:0;}
#lightbox>.container>.comment>.yorumKapat:hover{background-color:#FF3737;color:#fff;}
#lightbox>.container>.comment>.head{width:100%;font-family: 'Roboto', sans-serif;}
#lightbox>.container>.comment>.head>img{float:left;margin:0;margin-right:15px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#lightbox>.container>.comment>.head>h4{float:left;margin:0;padding-top:5px;font-family: 'Open Sans', sans-serif;font-weight:bold;}
#lightbox>.container>.comment>.head>p{float:left;margin:0;color:#aaa;}
#lightbox>.container>.comment>p{clear:both;display:block;padding:15px 0;font-family: 'Roboto', sans-serif;}
#lightbox>.container>.comment>ul{margin:0;padding:0;list-style:none;}
#lightbox>.container>.comment>ul>li{margin:0;padding:0;list-style:none;background-color:#f9f9f9;border-top:solid 2px #fff;padding:5px;clear:both;}
#lightbox>.container>.comment>ul>li>.img{float:right;}
#lightbox>.container>.comment>ul>li>div>img{float:left;margin:0;margin-right:5px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#lightbox>.container>.comment>ul>li>div>a{ font-family: 'Open Sans', sans-serif;font-weight:bold;}
#lightbox>.container>.comment>ul>li>div>ul{margin:0;padding:0; }
#lightbox>.container>.comment>ul>li>div>ul:after{content:" ";display:block;clear:both;}
#lightbox>.container>.comment>ul>li>div>ul>li{display:inline-block;padding:3px;padding-left:15px;color:#aaa;font-size:12px;}
#lightbox>.container>.comment>ul>li>div>ul>li>i{line-height: 17px;}
#lightbox>.container>.comment>ul>li>div>ul>li>i:before{margin-left:27px;margin-bottom:-15px !important;}
#lightbox>.container>.comment>ul>li>p{ word-wrap: break-word;margin-left:35px !important;display:block;font-family: 'Roboto', sans-serif;color:#909090;padding-top:5px;}
#lightbox>.container>.comment>.yrm{ border-top: 2px solid #fff; background-color: #f9f9f9;position: relative; padding: 3px; }
#lightbox>.container>.comment>.yrm>div{margin:0;}
#lightbox>.container>.comment>.yrm>div>div{padding-right:5px;}
#lightbox>.container>.comment>.yrm>div>div>div{min-width:35px;-webkit-border-radius: 3px !important;-moz-border-radius: 3px !important;border-radius: 3px !important; border:none !important; background: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yo/r/UlIqmHJn-SK.gif) no-repeat ; background-size:100% 100%;}
#lightbox>.container>.comment>.yrm>div>div>input{margin-left:5px !important;-webkit-border-radius: 0px !important;-moz-border-radius: 0px !important;border-radius: 0px !important; border:1px solid #ddd !important;}
#lightbox>.container>.comment>.yrm>div>div>input:focus{border-color:#00B3E7!important;-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;color:#00B3E7 !important;}
@media screen and (max-width: 1024px){	#lightbox>.container>.comment{display:none;background-color:#fff;position:absolute;top:0;width:90%;right:0;padding-top:50px !important;}	#lightbox>.container>.comment>.yorumKapat{display:block;}	#lightbox>.container>.bg>div>ul>li>a>span{display:none;}
}
@media screen and (min-width: 1024px){	#lightbox>.container>.comment{display:block;}	/*#lightbox>.container>.bg>div>ul>li.yorumAc{display:none;}*/
}
/* bilgi */
.info{display:inline-block;margin:auto;text-align:center; width:100%;margin-top:200px;font-family: 'Open Sans', sans-serif;}
.info .btn-default{padding:20px 50px !important;-webkit-border-radius: 100px;
-moz-border-radius: 100px;border-radius: 100px;font-family: 'Open Sans', sans-serif;font-size:16pt;font-weight:bold;}

Facebook Responsive Lightbox - Script Codes JS Codes

$(".goster").click(function(){	$("#lightbox").show();
});
$("#lightbox>.container>.bg>div>ul>li.yorumAc").click(function(){	$("#lightbox>.container>.comment").removeClass('fadeOutRight').show().addClass('fadeInRight');
});
$("#lightbox>.container>.comment>.yorumKapat").click(function(){	$("#lightbox>.container>.comment").removeClass('fadeInRight').addClass('fadeOutRight');
});
$( window ).resize(function() {	var w = $( window ).width(); if(w > 1024){	$("#lightbox>.container>.comment").show();	}else{	$("#lightbox>.container>.comment").hide();	}
});
Facebook Responsive Lightbox - Script Codes
Facebook Responsive Lightbox - Script Codes
Home Page Home
Developer Ayhan ALTINOK
Username AyhanALTINOK
Uploaded September 13, 2022
Rating 3
Size 4,661 Kb
Views 20,240
Do you need developer help for Facebook Responsive Lightbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ayhan ALTINOK (AyhanALTINOK) Script Codes
Name
Filtre ile Arama Kutusu - Search Box with Filter
Akordion slayt -acordion slide
Menu
Slider
Css sallanan resim efekti
Galeri efekti
Jquery Fare Animasyonu - Jquery Mouse Animation
Css galeri
Css3 animasyon
A Pen by Ayhan ALTINOK
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!