Autor Zpráva
moom
Profil
Dobrý den, nemáte prosím tušení, jak dosáhnout tohoto efektu:
http://www.tsto.org/work/prints-for-minna-parikka/

Děkuji, děkuji, děkuji :)
LosFilipos
Profil
moom:
Javascriptem se mění z-index jednotlivých fotek...
moom
Profil
jejda to je rychlost :) a je to prosím složité, dá se to nějak
okopírovat, nebo to existuje volně na webu? jak na to
koukám pomocí Firebugu, tak to asi není žádná hračka…
Asi to bude provázané s CSS.

Hmm… tak to si musím zajít chuť, to nezvládnu :(
LosFilipos
Profil
Naopak, je to celkem jednoduché, když použiješ jQuery.
To by potom vypadalo asi takto:
<style>
.lines {
position:absolute;
}

#button{
position:absolute;
z-index:100;
}
</style>	

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">	
		$(document).ready(function(){
		
		$('#button').click(function(){
      var pocet_fotek = $('.lines').length;
      
		  for(i=1;i<=pocet_fotek;i++) {
        var z_index = $('#f' + i).css("z-index");
        z_index++;
        if(z_index>pocet_fotek) {
          z_index = 1;
        }
        
        $('#f' + i).css({"z-index":z_index});
        
      }
		
		
    });
    
});
    
</script>


<img id="f1" class="lines" src="./fotky/zan1.jpg" style="top:20px;left:50px;z-index:1;" />
<img id="f2" class="lines" src="./fotky/zan2.jpg" style="top:10px;left:60px;z-index:2;" />
<img id="f3" class="lines" src="./fotky/zan3.jpg" style="top:30px;left:20px;z-index:3;" />
<img id="f4" class="lines" src="./fotky/zan4.jpg" style="top:50px;left:20px;z-index:4;" />
<img id="f5" class="lines" src="./fotky/zan5.jpg" style="top:30px;left:30px;z-index:5;" />
<input type="button" id="button" value="test" />


Funkční příklad zde
moom
Profil
skláním poklonu dlužím pivko i s utopencem, já umím jenom základy xhtml a css
a toto je pro mě trošku španělská vesnice :) Ale koukám, že bych to snad
mohl zvládnout použít. A jak prosím dosáhnout toho, aby tlačítko buton
bylo přes celou fotku a procházelo se klikáním na fotku.

Vlastně koukám, že v originálních stránkách mají nad fotkama dvě
pole, PRAVÉ / LEVÉ a když člověk najede na jedno z nich, tak se zobrazí
šipka a buď se to prochází doprava, nebo doleva. Je to prosím složité?

No jste kapacita, takovou rychlou reakci jsem nečekal.
LosFilipos
Profil
moom:
A jak prosím dosáhnout toho, aby tlačítko buton
bylo přes celou fotku a procházelo se klikáním na fotku.

Jednoduše, nebude se klikat na tlačítko, ale na fotku ;-)
 $('#button').click(function(){
nahraďit tímto:
 $('.lines').click(function(){


když člověk najede na jedno z nich, tak se zobrazí
šipka a buď se to prochází doprava, nebo doleva. Je to prosím složité?
Není to složité. Dá se to zvládnout jen pomocí css. Tlačítko si nastyluješ do divu na požadované místo a přidáš:
#div_s_tlacitkem .tlacitko {display:none;}
#div_s_tlacitkem:hover .tlacitko {display:block;}



Pokud mají být tlačítka 2, uprav skript následovně:
        $('.button_left').click(function(){
      var pocet_fotek = $('.lines').length;
      
          for(i=1;i<=pocet_fotek;i++) {
        var z_index = $('#f' + i).css("z-index");
        z_index--;
        if(z_index==0) {
          z_index = pocet_fotek;
        }
        
        $('#f' + i).css({"z-index":z_index});
        
      }
        
        
    });
    
});

       $('.button_right').click(function(){
      var pocet_fotek = $('.lines').length;
      
          for(i=1;i<=pocet_fotek;i++) {
        var z_index = $('#f' + i).css("z-index");
        z_index++;
        if(z_index>pocet_fotek) {
          z_index = 1;
        }
        
        $('#f' + i).css({"z-index":z_index});
        
      }
        
        
    });
    
});

(úpravu css nepíšu...)
Zde je opět funkční ukázka

Mimochodem, .button_left a button_right vůbec nemusí být tlačítko. Může to být třeba i obrázek, když bude mít nastavené class="button_left" (resp. class="button_right")
moom
Profil
panenko skákavá já mám radost :) Musím to hned otestovat, ale
zrovna musím odejít z domu, kurňa... tak to vyzkouším večer
hned jak přijdu. Děkuji, děkuji, děkuji, jsem dlužníkem :)
moom
Profil
Funguje to pěkně, ještě jednou díky, jste machr, skláním poklonu :)

Vyzkoušel jsem udělat z DIV prvků rovnou tlačítka, že jsem jim dal
cursor: pointer aby se dalo klikat jenom do pravé, nebo levé části
fotografie. Jenom je divné, že když překlikávám doprava, tak v jednom
místě se modře zvýrazní fotografie v pozadí :( Vůbec netuším proč...

Ukázka zde
LosFilipos
Profil
moom:
Jenom je divné, že když překlikávám doprava, tak v jednom
místě se modře zvýrazní fotografie v pozadí
To je tím, že se jakoby vybere text (označí jako když táhneš myš po odstavci). Řešením by bylo právě nechat v divu ten odkaz, nebo tlačítko.
moom
Profil
hmm… jdu to vyzkoušet, ale jestli to chápu správně, tak mně pak nebude
klikání jenom do pravé a levé části mimo tlačítko. Leda, že bych udělal průhledný
velký PNG, nebo GIF o velikostí celého DIVu. Jdu to testnout :)
moom
Profil
Tak jsem vložil do pravého a levého pole GIF obrázek
velikosti 300x600px a funguje to, jestli je to, ale 100%
správně netuším :)

Jejda... koukám, že validátor hlásí nějakou chybku ve scriptu

Mohu se prosím zeptat, jestli jste ochotný někdy udělat i nějaký
melouch za peníze. Občas dělám nějaké stránky a pokud
by se obohatily o nějaké podobné prvky, tak by to byla nádhera :)

Ukázka s velkým průhledným tlačítkem zde
LosFilipos
Profil
moom:
funguje to, jestli je to ale 100% správně netuším :
Koukal jsem do kódu a nevidím důvod, proč by to mělo být špatně... ;-)

Validátor sice hlásí chybu, ale to by šlo vyřešit přesunutím skriptu do externího js.

Určitě se nebráním nejaké další spolupráci a pokud bych za to dostal i zaplaceno, budu jen rád :-)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: