Jquery Lightbox ile Resim Büyütme
Merhaba arkadaşlar,
Bilindiği üzere web üzerinde resim galerisi yapma aşaması bazen can sıkıcı olabiliyor. Bu can sıkıcılığı ortadan kaldıracak bir Jquery kütüphanesi işimizi kolaylaştıracaktır. Bu kısımda Lightbox işimize yarıyacaktır. Şimdi arkadaşlar uygulamalı bir şekilde anlatmaya başlayalım.
1.Adım:
https://yadi.sk/d/7sRQG_PzcGWL5 adresinden belirtilen js, css ve image sayfalarını indiriyoruz.
2. Adım: projemize indirilen jquery ve lightbox dosyalarının yolunu gösteriyoruz.
3. Adım: css lerimizi projemize import ediyoruz.
4. Resimlerin sadecce yolunu belirtip sitenizin istediğiniz alanına ekleyebilirsiniz.
KODU:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Deneme</title>
<meta charset="UTF-8">
<link href="screen.css" rel="stylesheet" type="text/css"/>
<link href="lightbox.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="lightbox.min.js" type="text/javascript"></script>
</head>
<body>
<div class="image-row">
<a class="example-image-link" href="img/image-1.jpg" data-lightbox="example-2" data-title="Ammar ASLAN"><img class="example-image" src="img/image-1.jpg" alt="image-1"/></a>
</div>
</body>
</html>
Bilindiği üzere web üzerinde resim galerisi yapma aşaması bazen can sıkıcı olabiliyor. Bu can sıkıcılığı ortadan kaldıracak bir Jquery kütüphanesi işimizi kolaylaştıracaktır. Bu kısımda Lightbox işimize yarıyacaktır. Şimdi arkadaşlar uygulamalı bir şekilde anlatmaya başlayalım.
1.Adım:
https://yadi.sk/d/7sRQG_PzcGWL5 adresinden belirtilen js, css ve image sayfalarını indiriyoruz.
2. Adım: projemize indirilen jquery ve lightbox dosyalarının yolunu gösteriyoruz.
3. Adım: css lerimizi projemize import ediyoruz.
4. Resimlerin sadecce yolunu belirtip sitenizin istediğiniz alanına ekleyebilirsiniz.
KODU:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Deneme</title>
<meta charset="UTF-8">
<link href="screen.css" rel="stylesheet" type="text/css"/>
<link href="lightbox.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="lightbox.min.js" type="text/javascript"></script>
</head>
<body>
<div class="image-row">
<a class="example-image-link" href="img/image-1.jpg" data-lightbox="example-2" data-title="Ammar ASLAN"><img class="example-image" src="img/image-1.jpg" alt="image-1"/></a>
</div>
</body>
</html>
Yorumlar
Yorum Gönder