Forum PHP.pl > Przerobienie skryptu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

SpiJay

15.10.2012, 17:32:01

Cześć,

potrzebuję pomocy osób bardziej obeznanych w kwestii JS.
Korzystam ze skryptu o nazwie Supersized - Fullscreen Slideshow jQuery Plugin, cały skrypt do pobrania jest tutaj,a a demo tutaj.

Ogólnie wszystko wygląda tak:

(Wzorując się demo, które podesłałem wyżej)

Aktualny efekt jest taki:
w tle pod tekstem przesuwają się obrazy o stałej szerokości...
Do zobrazowania taki kod:

[HTML] pobierz, plaintext 
<div id="obraz-w-tle">
     <div class="box-absolute">tresc</div>
</div>
[HTML] pobierz, plaintext

po kliknięciu "następny" pojawia się inny obraz.

A ja chcę do tego dodać:
aby obrazy przesuwały się wraz z kilkoma tekstami. Dajmy na to, niech to będzie DIV abym mógł sobie jakość to wystylizować za pomocą CSS

Do zobrazowania taki kod:

[HTML] pobierz, plaintext 
<div id="obraz-w-tle">
     <div id="text-obraz">tresc</div>
     <div class="box-absolute">tresc</div>
</div>
[HTML] pobierz, plaintext

po kliknięciu "następny" pojawia się inny obraz z nowym id="text-obraz"...

Jak takie coś zrobić ?
Bardzo zależy mi na czasie, klient się niecierpliwi, a nie mam tyle czasu aby przestudiować ten język od podstaw...

Pozdrawiam,
Patryk Szram

lukasz1985

15.10.2012, 18:19:39

Poniżej zrzuciłem skrypt demo i dodałem dodatkową linie

patrz szczególnie linia 53:

[JAVASCRIPT] pobierz, plaintext 
 $('.slide-0').append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Slide 0</div>')
[JAVASCRIPT] pobierz, plaintext

$('.slide-n').append('treść dla elementu n')

Musisz wiedzieć ile masz slajdów, wtedy będzie możliwe dostawienie treści - jest div o klasie "element_dodatkowy". Ma styl inline ale możesz sobie go przenieść do pliku .css, pozostaw tylko bez zmian atrybuty z-index i position, muszą zostać też top i left. Jest to jedyne szybkie rozwiązanie.

Tutaj całość w komplecie:

[JAVASCRIPT] pobierz, plaintext 
 
            jQuery(function($){
 
                $.supersized({
 
                    // Functionality
                    slideshow               :   1,			// Slideshow on/off
                    autoplay				:	0,			// Slideshow starts playing automatically
                    start_slide             :   1,			// Start slide (0 is random)
                    stop_loop				:	0,			// Pauses slideshow on last slide
                    random					: 	0,			// Randomize slide order (Ignores start slide)
                    slide_interval          :   3000,		// Length between transitions
                    transition              :   6, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed		:	1000,		// Speed of transition
                    new_window				:	1,			// Image links open in new window/tab
                    pause_hover             :   0,			// Pause slideshow on hover
                    keyboard_nav            :   1,			// Keyboard navigation on/off
                    performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                    image_protect			:	1,			// Disables image dragging and right click with Javascript
 
                    // Size & Position						   
                    min_width		        :   0,			// Min width allowed (in pixels)
                    min_height		        :   0,			// Min height allowed (in pixels)
                    vertical_center         :   1,			// Vertically center background
                    horizontal_center       :   1,			// Horizontally center background
                    fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
                    fit_portrait         	:   1,			// Portrait images will not exceed browser height
                    fit_landscape			:   0,			// Landscape images will not exceed browser width
 
                    // Components							
                    slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    thumb_links				:	1,			// Individual thumb links for each slide
                    thumbnail_navigation    :   0,			// Thumbnail navigation
                    slides 					:  	[			// Slideshow Images
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/', id: 1},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
                    ],
 
                    // Theme Options			   
                    progress_bar			:	1,			// Timer for each slide							
                    mouse_scrub				:	0
 
                });
 
 
                $('.slide-0').append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Slide 0</div>')
            });
 
[JAVASCRIPT] pobierz, plaintext

SpiJay

15.10.2012, 19:09:06

Bardzo serdecznie dziękuję za pomoc.

Ratujesz mi skórę, dzięki

!

Kurcze, za szybko powiedziałem hop...

Wyświetlają mi się tylko 2 slide'y.. Każdy kolejny już się nie wyświetla (czarne tło), coś jest nie tak? :/

lukasz1985

15.10.2012, 20:05:27

Postaram się w ciągu godziny dać odpowiedź

[JAVASCRIPT] pobierz, plaintext 
 
 
            jQuery(function($){
 
                $.supersized({
 
                    // Functionality
                    slideshow               :   1,			// Slideshow on/off
                    autoplay				:	0,			// Slideshow starts playing automatically
                    start_slide             :   1,			// Start slide (0 is random)
                    stop_loop				:	0,			// Pauses slideshow on last slide
                    random					: 	0,			// Randomize slide order (Ignores start slide)
                    slide_interval          :   3000,		// Length between transitions
                    transition              :   6, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed		:	1000,		// Speed of transition
                    new_window				:	1,			// Image links open in new window/tab
                    pause_hover             :   0,			// Pause slideshow on hover
                    keyboard_nav            :   1,			// Keyboard navigation on/off
                    performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                    image_protect			:	1,			// Disables image dragging and right click with Javascript
 
                    // Size & Position						   
                    min_width		        :   0,			// Min width allowed (in pixels)
                    min_height		        :   0,			// Min height allowed (in pixels)
                    vertical_center         :   1,			// Vertically center background
                    horizontal_center       :   1,			// Horizontally center background
                    fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
                    fit_portrait         	:   1,			// Portrait images will not exceed browser height
                    fit_landscape			:   0,			// Landscape images will not exceed browser width
 
                    // Components							
                    slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    thumb_links				:	1,			// Individual thumb links for each slide
                    thumbnail_navigation    :   0,			// Thumbnail navigation
                    slides 					:  	[			// Slideshow Images
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/', id: 1},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
                    ],
 
                    // Theme Options			   
                    progress_bar			:	1,			// Timer for each slide							
                    mouse_scrub				:	0
 
                });
 
 
                theme.beforeAnimation  = function (direction) {
                    var slajdDocelowy = vars.current_slide
 
                    if (slajdDocelowy == 0)  {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu 0</div>')
                    } else if (slajdDocelowy == 1) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu PIERWSZEGO</div>')
                    } else if (slajdDocelowy == 2) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu Drugiego</div>')
                    } else if (slajdDocelowy == 3) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu Trzeciego </div>')
                    }
 
                    /*
                     *
                     * Można też tak:
                     *
                    switch (slajdDocelowy) {
                        case 0:
                            $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu 0</div>')
                            break;
                        case 1:
                            $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu PIERWSZEGO</div>')
                            break;
                    }
                     */
 
                }
 
 
            });
 
 
[JAVASCRIPT] pobierz, plaintext

Teraz działa

SpiJay

16.10.2012, 10:50:42

Faktycznie, teraz prawie jest ok.
Tylko jeszcze fajnie by było gdyby się zapętlało, bo obecnie slajdy lecą dalej.
Mam 6 i po ostatnim znowu jest czarny ekran.

Jakiś pomysł ?

+ pomógł

Na czarnym pasku na dole służącym do nawigacji, nie pokazują się kolejne liczby względem obrazów...

Jakieś rady ?

lukasz1985

16.10.2012, 11:01:24

Ten kod powinien poprawić błąd. Powinien się znajdować od linii 54.

[JAVASCRIPT] pobierz, plaintext 
 var superBeforeAnimation = theme.beforeAnimation
                theme.beforeAnimation  = function (direction) {
                    superBeforeAnimation(direction)
                    var slajdDocelowy = vars.current_slide
 
                    if (slajdDocelowy == 0)  {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu 0</div>')
                    } else if (slajdDocelowy == 1) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu PIERWSZEGO</div>')
                    } else if (slajdDocelowy == 2) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu Drugiego</div>')
                    } else if (slajdDocelowy == 3) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu Trzeciego </div>')
                    }
                }
[JAVASCRIPT] pobierz, plaintext

SpiJay

17.10.2012, 18:52:49

lukaszu, chciałbym abyś coś zobaczył...

Efekt jest tutaj: http://iam4u-server.home.pl/antybank-demo/

Zwróć uwagę na teksty, a dokładniej cień pod nimi, w momencie gdy cofasz slajda, lub w momencie gdy dochodzi do ich zapętlania (zaraz po ostatnim slajdzie),
tekst nachodzi na siebie ponownie (widać to po większym natężeniu cienia pod napisame [-> Mozilla]). Z tego co zdążyłem wywnioskować z kodu, to dodaje się DIV w momencie ukazania się slajdu, ale wydaje mi się, że w momencie ukazywania następnego slajda, poprzednie teksty w divach nie są usuwane. Mylę się ?
Dasz jakąś radę na to ?

Pozdrawiam,
Patryk

lukasz1985

17.10.2012, 19:19:00

Rzeczywiście. Chodzi o to, że przy każdym przejściu tworzony jest dodatkowy element.

Wstaw:

[JAVASCRIPT] pobierz, plaintext 
   var wyswietlone = [];
[JAVASCRIPT] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
 
 if (wyswietlone.indexOf(slajdDocelowy) != -1) {
                        return
                    } else {
                        wyswietlone.push(slajdDocelowy)
                    }
[JAVASCRIPT] pobierz, plaintext

według wzorca:

[JAVASCRIPT] pobierz, plaintext 
 var superBeforeAnimation = theme.beforeAnimation
                var wyswietlone = [];
                theme.beforeAnimation  = function (direction) {
 
 
                    superBeforeAnimation(direction)
                    var slajdDocelowy = vars.current_slide
                    if (wyswietlone.indexOf(slajdDocelowy) != -1) {
                        return
                    } else {
                        wyswietlone.push(slajdDocelowy)
                    }
 
                    if (slajdDocelowy == 0)  {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu 0</div>')
                    } else if (slajdDocelowy == 1) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu PIERWSZEGO</div>')
                    } else if (slajdDocelowy == 2) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu Drugiego</div>')
                    } else if (slajdDocelowy == 3) {
                        $('.slide-' + slajdDocelowy ).append('<div class="element_dodatkowy" style="z-index: 9999; background: white; position: absolute; left: 10px; top: 20px;">Treść dla slajdu Trzeciego </div>')
                    }
 
                }
[JAVASCRIPT] pobierz, plaintext

powinno działać.

Jeśli IE będzie miał z tym problemy to na samej górze skryptu wstaw kod:

[JAVASCRIPT] pobierz, plaintext 
 
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;
 
    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;
 
    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
[JAVASCRIPT] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.