Zaloguj się

rothejro · 09-12-2011, 03:34

Chciałem zrobić galerię na stronę.
Początkowe szkice oczywiście były. Zasięgnąłem po pomoc do fancyBox aby wzór skopiować. A dalej próbować samemu.

Kod mam, jednakże coś nie tak. A nawet nie wiem co ?!

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta http-equiv="imagetoolbar" content="no" />

    <!-- Add jQuery library -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <!-- Add easing plugin (this is optional) -->

    <script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->

    <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->

    <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>

    <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" media="screen" />

    <!-- Add fancyBox - button helper (this is optional) -->

    <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-buttons.css" />

    <script type="text/javascript" src="/fancybox/jquery.fancybox-buttons.js"></script>

    <!-- Add fancyBox - thumbnail helper (this is optional) -->

    <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-thumbs.css" />

    <script type="text/javascript" src="/fancybox/jquery.fancybox-thumbs.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $(".fancybox").fancybox();

    });

</script>

</head>

<body>

<a class="fancybox-button" rel="fancybox-button" href="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_b.jpg" 

title="Tree and Bench, Newlands Corner (craig.denford)">

    <img src="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_m.jpg" alt="" />

</a>

<a class="fancybox-button" rel="fancybox-button" href="http://farm7.staticflickr.com/6032/6370797521_74a61aec56_b.jpg" 

title="Brighton West Pier (George-Edwards)">

    <img src="http://farm7.staticflickr.com/6032/6370797521_74a61aec56_m.jpg" alt="" />

</a>

<a class="fancybox-button" rel="fancybox-button" href="http://farm7.staticflickr.com/6182/6059490424_451d8d75b8_b.jpg" 

title="Romantic sunset.  EXPLORE (Grbavica)">

    <img src="http://farm7.staticflickr.com/6182/6059490424_451d8d75b8_m.jpg" alt="" />

</a>

<a class="fancybox-button" rel="fancybox-button" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" 

title="Fog (giulio bassi q°ן°p)">

    <img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt="" />

</a>

<script type="text/javascript">

$(document).ready(function() {

    $(".fancybox-button").fancybox({

        prevEffect        : 'none',

        nextEffect        : 'none',

        closeBtn        : false,

        helpers        : { 

            title    : { type : 'inside' },

            buttons    : {}

        }

    });

});

</script>

</body>

</html>

**Kartofelek** · 09-12-2011, 16:33

ColorBox jest ładniejszy (poszukaj w google).

Większość kodu jest niepotrzebna. Tak naprwadę potrzebujesz tylko tego:

Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>

<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" media="screen" />

I oczywiście twojego skryptu który masz na dole.
I teraz czy linki z miniaturkami mają klasę "fancybox"?

rothejro · 09-12-2011, 21:15

Nie, nie mają. Po prostu stworzyłem jedynie folder ' fancybox '

A czy jest możliwość stworzenia, czegoś takiego jak :
Po otworzeniu strony od razu wyświetla się galeria ( podgląd od razu ) .

Bo właśnie chciałem do tego dojść malutkimi kroczkami.

**Kartofelek** · 09-12-2011, 22:02

Na pewno w colorbox. Nie pamiętam czy w fancybox. Zobacz sobie na ich stronie masz opis metod

rothejro · (Ten post był ostatnio modyfikowany: 10-12-2011, 00:35 przez rothejro.)

a pomożesz mi znaleźć, bo nie mogę znaleźć.
Oczywiście chodzi mi o colorbox.

Mam tam dużo metod,

np.

open false If true, ColorBox will immediately open.

Edit : To co znalazłem, to zadziałało. ! Kurczę.! Smile

)
Dzięki za pomoc Smile

)

**Kartofelek** · 10-12-2011, 00:33

no wlasnie to to

rothejro · 10-12-2011, 00:52

To jeszcze jedna rzecz, taka mnie interesuje.
Mam już to co chciałem, jednak chciałbym aby to było na 6 ! Smile

Chciałbym aby po kliknięciu myszką po za obszar zdjęcia nie zamykała mi się galeria.
A potem jeszcze z tłem coś muszę zrobić..

Ale co z myszką?

mam kod zawarty w colorbox :

Kod:
$("#click").click(function(){ 

                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

                    return false;

rothejro · 10-12-2011, 00:55

Mam wszystko pięknie, i wesoło ! Smile

Jednak ostatnia poprawka, to taka, że podczas zmiany zdjęcia, za zdjeciem pisze 'close' .

Jakiś pomysł ?
Może podesłać kod ? ;>

**Kartofelek** · 10-12-2011, 03:47

CZYTAMY DOKŁADNIE Smile

cytat z ich strony:

overlayClose true If false, disables closing ColorBox by clicking on the background overlay.

**Kartofelek** · 11-12-2011, 01:54

podesłać linka do strony. Inaczej możemy dłubać w nosie zastanawiając się co się dzieje

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie