Nawigacja

Aktualnie online

Gości online: 15

Użytkowników online: 0

Łącznie użytkowników: 25,386
Najnowszy użytkownik: Hisfatt

Logowanie

Zarejestruj się

Odzyskaj hasło

Shoutbox

Musisz zalogować się, aby móc dodać wiadomość.

Zbigniew@

01.04.2024 12:28:45

Wszystkiego najlepszego z okazji świąt.

JazOOn

28.02.2024 19:25:31

ja zostałem przy fusionie ale nazywa się 360. Projektowanie i druk 3d...

MajsterBieda

25.02.2024 00:12:42

Ponad 20 lat .... tosz to sioook panie....

JazOOn

24.02.2024 20:32:31

a już na pewno mamuty

JazOOn

24.02.2024 20:31:59

Albo dinozaury

Archiwum shoutboksa

O nie! Ta strona potrzebuje włączonej obsługi języka JavaScript!

Twoja przeglądarka nie obsługuje tego języka lub ma wyłączoną jego obsługę. Włącz wykonywanie kodu JavaScript w swojej przeglądarce internetowej, aby skorzystać ze wszystkich funkcji strony
lub skorzystaj z programu obsługującego język JavaScript, np. Mozilla Firefox, Apple Safari, Opera, Google Chrome lub Windows Internet Explorer w wersji wyższej niż 6.

Zobacz temat

Polski Oficjalny Support PHP-Fusion » PHP-Fusion v7 Support » Propozycje użytkowników

Slide Show with Semi-Transparent Caption
Dzoker	#1 Dodany dnia 18.11.2009 19:38:00
Przedszkolak Postów: 32 Data rejestracji: 13.06.2005 03:26	Witam. Próbowałem zastosować w swoim php-fusion Simple JQuery Image Slide Show with Semi-Transparent Caption, niestety bezskutecznie, dlatego proszę o radę, co zrobić, by uzyskać oczekiwany efekt (w chwili obecnej wyświetlają mi się dwa obrazki jeden pod drugiem). Rzeczy jakie zrobiłem: - plik z paczki (jquery-1.3.1.min.js) wgrałem do katalogu js, - w themes/templates/header.php dodałem: Rozwiń Kod źródłowy PHP `echo "<script type='text/javascript' src='../js/jquery-1.3.1.min.js'></script>\n"; echo "<script type='text/javascript'>\n";` Kliknij i zaczekaj na załadowanie kodu ... - w pliku styles.css swojej skórki dałem: Rozwiń Kod źródłowy PHP #gallery { position:relative; height:360px } #gallery a { float:left; position:absolute; } #gallery a img { border:none; } #gallery a.show { z-index:500 } #gallery .caption { z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute; bottom:0; } #gallery .caption .content { margin:5px } #gallery .caption .content h3 { margin:0; padding:0; color:#1DCCEF; } Kliknij i zaczekaj na załadowanie kodu ... - dodałem panel o treści: Rozwiń Kod źródłowy PHP openside("name"); echo " <div id='gallery'> <a href='#' class='show'> <img src='/images/photoalbum/album_25/cam.jpg' alt='Flowing Rock' alt='' title='' width='580' height='360' rel='<h3>Flowing Rock</h3>You can put html element inside the REL attribute.'/></a> </a> <a href='#'> <img src='/images/photoalbum/album_16/dscf0024.jpg' alt='Grass Blades' alt='' title='' width='580' height='360' rel='<h3>Grass Blades</h3>description'/> </a> <div class='caption'><div class='content'></div></div> </div> <div class='clear'></div>"; closeside(); Kliknij i zaczekaj na załadowanie kodu ... Wszystko to dało mi ułożone pod sobą dwa zdjęcia. Gdzieś musi tkwić błąd, lecz samemu jeszcze nie udało mi się go znaleźć mimo różnych prób kombinowania z kodem. Dlatego szukam pomocy u Was. Pomożecie? Edytowane przez Dzoker dnia 18.11.2009 19:39:39


Wścibski Gość	Dodany dnia 19.04.2024 16:52:22
Pan Kontekstualny Postów: n^x Data rejestracji: Zawsze
IP: localhost

Wooya	#2 Dodany dnia 18.11.2009 19:49:22
Zaawansowany Postów: 1449 Pomógł: 22 Data rejestracji: 30.01.2005 15:40	No trza by jeszcze dodac skrypt dla tego slideshow i gdzies uruchomic nie? ... Pomagam tylko przy najnowszych wersjach PHP-Fusion ...


Dzoker	#3 Dodany dnia 18.11.2009 20:38:19
Przedszkolak Postów: 32 Data rejestracji: 13.06.2005 03:26	Dzięki. Faktycznie przegapiłem. Wrzuciłem więc Rozwiń Kod źródłowy PHP $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); //Display the content $('#gallery .content').html(caption); } Kliknij i zaczekaj na załadowanie kodu ... do jquery-1.3.1.min.js co dało efekt taki jak w załączniku. Będę kombinował dalej aczkolwiek podpowiedź mile widziana. :)


kisiell9	#4 Dodany dnia 14.10.2010 18:23:38
Przedszkolak Postów: 7 Data rejestracji: 02.05.2010 12:23	Witam, ja zrobiłem tak samo jak @Dzoker, i niestety zamiast strony "news.php" pojawia mi się biała strona.http://kisiell9-h...1/news.php Czy mogę poprosić o przerobione pliki?


Chemikpil	#5 Dodany dnia 14.10.2010 19:45:11
Bywalec Postów: 999 Pomógł: 54 Data rejestracji: 04.05.2008 21:46	To może pokażesz nam te pliki? Nie pisać na GG i PW w sprawach technicznych! ChemikPil - blog (w nowej odsłonie) \| ChemikPIL - My twitter


kisiell9	#6 Dodany dnia 19.10.2010 15:50:04
Przedszkolak Postów: 7 Data rejestracji: 02.05.2010 12:23	Przez jakiś czas mnie nie było, ale już daję treść moich plików.Niestety musiałem wklejać pliki na NoPaste,ponieważ tutaj niebyło ich widać:( Plik jquery-1.3.1.min.js: http://www.nopast... ----- Plik header.php: http://www.nopast... ----- Plik styles.css: http://www.nopast... I tak jak @Dzoker dodałem panel o treści: Rozwiń Kod źródłowy openside("name"); echo " <div id='gallery'> <a href='#' class='show'> <img src='/images/photoalbum/album_25/cam.jpg' alt='Flowing Rock' alt='' title='' width='580' height='360' rel='<h3>Flowing Rock</h3>You can put html element inside the REL attribute.'/></a> </a> <a href='#'> <img src='/images/photoalbum/album_16/dscf0024.jpg' alt='Grass Blades' alt='' title='' width='580' height='360' rel='<h3>Grass Blades</h3>description'/> </a> <div class='caption'><div class='content'></div></div> </div> <div class='clear'></div>" ; closeside(); Wiadomość doklejona: @Refresh Pomoże mi ktoś z tym? Edytowane przez kisiell9 dnia 23.10.2010 11:18:20

Przejdź do forum:

Twój link u nas!

Nawigacja

Główne menu

Komunikacja

Elementarz

Dokumentacja

Aktualnie online

Logowanie

Shoutbox

Zobacz temat