Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problemy z przeglądarką zdięć
Forum PHP.pl > Forum > Po stronie przeglądarki
dark_root
30.05.2009, 18:07:09
To jest element mojej przeglądarki zdjęć w js.
Kod
document.write(
        '<form action="javascript:void(0)" id="' + this.id + '" class="zdjecia">' +
            '<div class="zdjecia_menu">' +
                '<input type="button" name="poczatek" value="|&lt;&lt;"' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Początek" onclick="' + this.id + '.wyswietl(0)" onkeypress="' + this.id + '.wyswietl(0)" />' +
                '<input type="button" name="wstecz" value="  &lt;&lt;  "' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Wstecz" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" />' +
                ' <select name="zdjecia" onchange="' + this.id + '.wyswietl(this.selectedIndex)">' +
                    html +
                '</select> ' +
                '<input type="button" name="dalej" value="  &gt;&gt;  "' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Dalej" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" />' +
                '<input type="button" name="koniec" value="&gt;&gt;|"' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Koniec" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" />' +
                '<div><input type="checkbox" name="auto"' + (auto ? ' checked="checked"' : '') + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle" /> <label for="' + this.id + '__auto">Pokaz slajdów</label></div>' +
            '</div>' +
            '<a href="' + zdjecia[nr][0] + '" rel="lightbox-cats"><img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..."/></a>' +
            '<div class="zdjecia_opis" id="' + this.id + '__opis">' + (typeof zdjecia[nr][2] != 'undefined' ? zdjecia[nr][2]: '') + '</div>' +
        '</form>'
    );


Problem polega na tym, że jak przewijam kolejne zdjęcia do przodu zmieniają się tylko miniaturki, natomiast odnośnik do większych zdjęć się nie zmienia, lecz jest stały, pomimo, iż używam tej samej zmiennej. Chodzi o ten kawałek
Kod
<a href="' + zdjecia[nr][0] + '" rel="lightbox-cats"><img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..."/></a>
W ścieżce obrazka zdjecia[nr][0] się zmiania a w odnośniku zdjecia[nr][0] cały czas równa się tyle samo a 0 powinno się zmieniać. Dlaczego tak jest?
erix
30.05.2009, 20:23:13
Fajnie, że nam kod podałeś...

Co to jest wyswietl()?
dark_root
30.05.2009, 21:41:33
Cały kod
Kod
function PrzegladarkaZdjec(id, zdjecia)
{
    this.czas = 5;    // czas przejścia w trybie pokazu slajdów [sek]
    
    
    this.id = id;
    this.zdjecia = zdjecia;
    var timerID = null;
    
    this.wyswietl = function(nr)
    {
        clearTimeout(timerID);        
        var f = document.getElementById(this.id);
        
        if (nr < 0) nr = f.elements['zdjecia'].options.length - 1;
        else if (nr > f.elements['zdjecia'].options.length - 1) nr = 0;
        
        if (nr == 0)
        {
            f.elements['poczatek'].disabled = true;
            f.elements['wstecz'].disabled = true;
            f.elements['dalej'].disabled = false;
            f.elements['koniec'].disabled = false;
        }
        else if (nr == f.elements['zdjecia'].options.length - 1)
        {
            f.elements['poczatek'].disabled = false;
            f.elements['wstecz'].disabled = false;
            f.elements['dalej'].disabled = true;
            f.elements['koniec'].disabled = true;
        }
        else
        {
            f.elements['poczatek'].disabled = false;
            f.elements['wstecz'].disabled = false;
            f.elements['dalej'].disabled = false;
            f.elements['koniec'].disabled = false;
        }
        
        f.elements['zdjecia'].selectedIndex = nr;
        document.getElementById(this.id + '__img').src = f.elements['zdjecia'].options[nr].value;
        document.getElementById(this.id + '__opis').innerHTML = typeof this.zdjecia[nr][2] != 'undefined' ? this.zdjecia[nr][2] : '';
        if (f.elements['auto'].checked) this.przewin();
    }
    
    this.przewin = function()
    {
        clearTimeout(timerID);
        var f = document.getElementById(this.id);
        if (f.elements['auto'].checked)
        {
            if (document.getElementById(this.id + '__img').complete) timerID = setTimeout(this.id + '.wyswietl(' + (f.elements['zdjecia'].selectedIndex < f.elements['zdjecia'].options.length - 1 ? f.elements['zdjecia'].selectedIndex + 1 : 0) + ')', this.czas * 1000);
            else timerID = setTimeout(this.id + '.przewin()', 500);
        }
    }
    
    var matches = window.location.search.match(new RegExp('[\?&]' + this.id + '=(-?[0-9]+)(&|$)'));
    if (matches && typeof matches[1] != 'undefined')
    {
        var auto = matches[1].substring(0, 1) == '-' ? true : false;
        matches[1] = parseInt(matches[1]);
        var nr = Math.abs(matches[1]);
        if (nr < 0) nr = 0;
        else if (nr > zdjecia.length - 1) nr = zdjecia.length - 1;
    }
    else
    {
        var nr = 0;
        var auto = false;
    }
    
    for (var i = 0, html = ''; i < zdjecia.length; i++)
    {
        html += '<option value="' + zdjecia[i][0] + '"' + (i == nr ? ' selected="selected"' : '') + '>' + zdjecia[i][1] + '</option>';
    }
    
    document.write(
        '<form action="javascript:void(0)" id="' + this.id + '" class="zdjecia">' +
            '<div class="zdjecia_menu">' +
                '<input type="button" name="poczatek" value="|&lt;&lt;"' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Początek" onclick="' + this.id + '.wyswietl(0)" onkeypress="' + this.id + '.wyswietl(0)" />' +
                '<input type="button" name="wstecz" value="  &lt;&lt;  "' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Wstecz" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" />' +
                ' <select name="zdjecia" onchange="' + this.id + '.wyswietl(this.selectedIndex)">' +
                    html +
                '</select> ' +
                '<input type="button" name="dalej" value="  &gt;&gt;  "' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Dalej" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" />' +
                '<input type="button" name="koniec" value="&gt;&gt;|"' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Koniec" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" />' +
                '<div><input type="checkbox" name="auto"' + (auto ? ' checked="checked"' : '') + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle" /> <label for="' + this.id + '__auto">Pokaz slajdów</label></div>' +
            '</div>' +
            '<a href="' + zdjecia[nr][0] + '" rel="lightbox-cats"><img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..."/></a>' +
            '<div class="zdjecia_opis" id="' + this.id + '__opis">' + (typeof zdjecia[nr][2] != 'undefined' ? zdjecia[nr][2]: '') + '</div>' +
        '</form>'
    );
    
    if (auto) this.przewin();
}</script>
<body>
<script type="text/javascript">
// <![CDATA[
var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array(
    new Array('zdjecie_m.jpg', 'Tytuł', 'dfgf'),
    new Array('plus.gif', 'Tytuł', 'Opiffs'),
    new Array('minus.gif', 'Tytuł', 'ssOpis')
));
// ]]>
</script>
erix
1.06.2009, 21:06:06
Daj gdzieś działający skrypt, trochę pogmatwany kod i ciężko tak do czegoś dojść...
dark_root
1.06.2009, 22:16:23
LINK
Kod jest już nieco zmieniony, bo pomału dochodzę jak to zrobić. Mianowicie adres odnośnika powinien wyglądać chyba tak
Kod
var lech=this.zdjecia[ruben]
<a href="' + lech[0] + '" rel="lightbox-cats">
<img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..."/></a>' +
           '<div class="zdjecia_opis" id="' + this.id + '__opis">' + (typeof zdjecia[nr][2] != 'undefined' ? zdjecia[nr][2]: '') + '</div>' +
       '</form>

Wystarczy jeszcze zdeklarować zmienną ruben na początku dokumentu i na wszystkich buttonach dodać w onclick zmiany wartości zmiennej ruben w zależności od buttona. Jednak nie wiem czy to jest najlepsze i czy w pełni działające rozwiązanie. Dlatego wszelka pomoc mio widziana.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.