[C#.NET] Efekt Lightbox dla zdjęć na stronach w C#.NET

C# .NET JavaScript Opublikowano: 27/11/2009

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

Dzisiejszy artykuł będzie dotyczył kwestii dodania efektu Lightbox do zdjęć na stronach napisanych w języku C#.NET.
Język ten jest konkurentem dla bardziej popularnego języka programowania stron WWW jakim jest PHP. Jest prostszym językiem niż PHP, ponieważ wygląd i funkcjonalność strony można sobie właściwie wyklikać.
Jak więc osiągnąć pożądany przez nas efekt?

Najpierw należy pobrać sobie bibliotekę Lightbox ze strony, następnie ją wypakować do folderu z projektem strony w C#.
Do wykonania tego projektu strony wykorzystałem program Visual Web Developer (VWD) 2008 Express Edition, który można sobie ściągnąć za darmo ze strony Microsoftu i wykorzystać go w celach niekomercyjnych.

Teraz w programie VWD 2008, po lewej stronie okna powinniśmy zobaczyć następujące rzeczy:

: Widok początkowy okna Solution Explorera

: Na górnym pasku Solution Explorera kliknij w przycisk Show All Files

: Zaznacz foldery css, images, js i kliknij prawym klawiszem myszy i wybierz opcję Include in Project

Jeśli wykonałeś wszystkie kroki, to powinieneś mieć gotowe podstawy projektu.
Teraz pora przejść kodu pliku Default.aspx, który będzie wyglądał następująco:

< %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>
 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styl.css" type="text/css" media="screen" />
    <title>Efekt Lightbox dla zdjęć - demo by Piotr Nalepa</title>
</head>
<body>
<form id="form1" runat="server">
<h2>Obrazek z efektem Lightbox</h2>
 
        <a href="images/logo2.jpg" rel="lightbox" title="Logo Piotr Nalepa"><img class="obrazek" src="images/logo2.jpg" width="60" alt="Moje logo" /></a>
        <a href="images/logo.jpg" rel="lightbox" title="Logo Piotr Nalepa"><img class="obrazek" src="images/logo.jpg" width="60" alt="Moje logo" /></a>
    </form>
 
</body>
</html>

Pliku programującego (jak to tak nazywam) nie trzeba edytować dla potrzeb tego przykładu i pozostawiamy go w takim stanie w jakim został wygenerowany przez program VWD.

Na koniec dodamy trochę linijek kodu do naszego arkusza styłów styl.css:

body {
    margin: 0;
    padding: 0;
    background: #000;
    font-family: Tahoma, Sans-Serif;
    color: #fff;
    width: 600px;
    margin: auto;
}
* {
    outline: none;
    border: none;
}
img.obrazek {
    margin: 5px;
}

I to byłoby w zasadzie wszystko.
Efekt Lightbox będzie działał zawsze dla linków oznaczonych atrybutem rel=”lightbox”. Natomiast jeśli chcemy uzyskać coś a’la pokaz slajdów to należy zamiast rel=”lightbox” stworzyć rel=”lightbox[galeria1]„ dla każdego z obrazków, które chcemy aby były użyte w jednej galerii.
Jeżeli na stronie chcemy umieścić kilka odrębnych galerii, to dla każdej nowej galerii tworzymy nową nazwę w „[...]„.