Problemy z przeglądarką zdięć Opcje

[dark_root]

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]

Fajnie, że nam kod podałeś...

Co to jest wyswietl()?

[dark_root]

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]

Daj gdzieś działający skrypt, trochę pogmatwany kod i ciężko tak do czegoś dojść...

[dark_root]

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.

Ten post edytował dark_root 1.06.2009, 22:17:45