Autore Topic: Effetto sliding door  (Letto 9169 volte)

PierBin

  • Utente esperto
  • ***
  • Post: 323
Effetto sliding door
« il: 23 Giugno, 2012, 08:21:13 »
Ciao GDR,volevo sapere se questo effetto trovato su questo sito è stato spiegato nella relativa sezione
vedi sito d'esempio
Grazie mille
« Ultima modifica: 23 Giugno, 2012, 10:01:26 da GDR »

frank.cobra

Re:Effetto
« Risposta #1 il: 23 Giugno, 2012, 09:20:16 »
Ciao Pier,
Quel sito da te indicato è stato fatto in wordpress
questo è il link del template "free"
http://wordpress.org/extend/themes/sliding-door
http://wordpress.org/extend/themes/sliding-door
con website ho visto qualche effetto simile fatto in css da Likaweb
la pagina demo è questa:
http://www.likaweb.net/demo/102/index.html

Avevo visto anche qualcosa anche di simile ... ma ora non trovo il link !!!

Sicuramente GDR può essere più esplicativo


PierBin

  • Utente esperto
  • ***
  • Post: 323
Re:Effetto
« Risposta #2 il: 23 Giugno, 2012, 09:47:57 »
Ciao frank.cobra, ho visto anch'io la sorgente del sito web, ma l'effetto suggerito non è la stessa cosa,
grazie e buona giornata

GDR

  • Moderatore globale
  • Utente anziano
  • *****
  • Post: 576
Re:sliding door
« Risposta #3 il: 23 Giugno, 2012, 09:53:11 »
Forse meglio evitare mootools, se non erro lì dovrebbe esserci... comunque stessa cosa e già trattata ma non ricordo dove si fa tranquillamente con jquery:


http://www.gdrtestdesign.altervista.org/jquery%20image%20menu/
« Ultima modifica: 23 Giugno, 2012, 10:01:44 da GDR »

PierBin

  • Utente esperto
  • ***
  • Post: 323
Re:sliding doors mootools
« Risposta #4 il: 23 Giugno, 2012, 10:04:37 »
Forse meglio evitare mootools, se non erro lì dovrebbe esserci... comunque stessa cosa e già trattata ma non ricordo dove si fa tranquillamente con jquery:


http://www.gdrtestdesign.altervista.org/jquery%20image%20menu/

 
Bene si l'effetto è quello, hai il link di esempio con allegato file IWP
Forse pretendo troppo?
Grazie e Buon weekend

GDR

  • Moderatore globale
  • Utente anziano
  • *****
  • Post: 576
Re:Effetto sliding door
« Risposta #5 il: 23 Giugno, 2012, 11:37:06 »
Si cerca di spronare ed invogliare gli utenti a riuscire, leggendo il codice, ad arrivare comunque alla soluzione altrimenti si rimane sempre un po limitati all'aiuto...comunque al link mio precedente adesso è presente il file IWZIP.

Ciao.

PierBin

  • Utente esperto
  • ***
  • Post: 323
Re:Effetto sliding door
« Risposta #6 il: 23 Giugno, 2012, 13:00:54 »
Si cerca di spronare ed invogliare gli utenti a riuscire, leggendo il codice, ad arrivare comunque alla soluzione altrimenti si rimane sempre un po limitati all'aiuto...comunque al link mio precedente adesso è presente il file IWZIP.

Ciao.

Concordo sulla tua precisazione, ti RINGRAZIO della disponibiltà che come sempre mostri nei topic, ho messo in rete il proggetto ma non funziona l'effetto sulle immagini, mi piacerebbe inserirlo nell' intestazione.
1 intestazione codice html
2 nella home - cella html con i relativi file allegati
3 cosa sbaglio ?
pagina dimostrativa
Saluti

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Effetto sliding door
« Risposta #7 il: 23 Giugno, 2012, 13:14:46 »
Ti sei dimenticato questo:

Codice:
Only registered users can see contents. Please click here to Register or Login.

PierBin

  • Utente esperto
  • ***
  • Post: 323
Re:Effetto sliding door
« Risposta #8 il: 23 Giugno, 2012, 18:55:35 »
Ti sei dimenticato questo:

Codice:
Only registered users can see contents. Please click here to Register or Login.



Ciao Lemon, grazie del pezzo di codice mancante;
Altro problema dato che l'effetto l' ho inserito nell' intestazione come faccio ad farlo visualizzare anche ne blog
vedi esempio
Che trita pa che sono !!!!!!!!!!!!!!!!
Ciao

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Effetto sliding door
« Risposta #9 il: 23 Giugno, 2012, 21:25:28 »
Intanto quel codice andrebbe messo nell'head.

Non avendo la 9 non posso provare bene se codice + file JS etc... possono essere messi in (nella 8 è) impostazioni generali - esperto - codice personalizzato per la sezione head.

Se inseriti lì funge tutto, potresti scrivere i percorsi assoluti delle immagini nel file http://grafikoweb.altervista.org/files/jimgmenu.css ed in queste 3 righe:

Citazione
<link rel="stylesheet" type="text/css" href="http://grafikoweb.altervista.org/files/jimgmenu.css" media="screen, print" />
<script type="text/javascript" src="http://grafikoweb.altervista.org/files/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://grafikoweb.altervista.org/files/jquery-easing-compatibility.1.2.pack.js"></script>


Il Blog è in una cartella quindi questo è il sistema più semplice che mi viene in mente (mentre con un occhio guardo Spagna - Francia  :) ) per far trovare le immagini etc...

Potresti anche creare una cartella files nella cartella blog e copiarci quei 3 files + immagini (senza modificare i percorsi).

Ti conviene aspettare GDR o altri e lasciare in sospeso questo mio post.  ;)

PierBin

  • Utente esperto
  • ***
  • Post: 323
Re:Effetto sliding door
« Risposta #10 il: 23 Giugno, 2012, 22:32:42 »
Intanto quel codice andrebbe messo nell'head.

Non avendo la 9 non posso provare bene se codice + file JS etc... possono essere messi in (nella 8 è) impostazioni generali - esperto - codice personalizzato per la sezione head.

Se inseriti lì funge tutto, potresti scrivere i percorsi assoluti delle immagini nel file http://grafikoweb.altervista.org/files/jimgmenu.css ed in queste 3 righe:

Citazione
<link rel="stylesheet" type="text/css" href="http://grafikoweb.altervista.org/files/jimgmenu.css" media="screen, print" />
<script type="text/javascript" src="http://grafikoweb.altervista.org/files/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://grafikoweb.altervista.org/files/jquery-easing-compatibility.1.2.pack.js"></script>


Il Blog è in una cartella quindi questo è il sistema più semplice che mi viene in mente (mentre con un occhio guardo Spagna - Francia  :) ) per far trovare le immagini etc...

Potresti anche creare una cartella files nella cartella blog e copiarci quei 3 files + immagini (senza modificare i percorsi).

Ti conviene aspettare GDR o altri e lasciare in sospeso questo mio post.  ;)

Funziona perfettamente
grazie
lemonsong 1 - Inghilterra 0
Ciao grazie mille

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Effetto sliding door
« Risposta #11 il: 24 Giugno, 2012, 10:43:09 »
lemonsong 1 - Inghilterra 0


Diciamo 1 a 1 e tempi supplementari... questo era superfluo  :) :

potresti scrivere i percorsi assoluti delle immagini nel file http://grafikoweb.altervista.org/files/jimgmenu.css


Ciao, prego.

frank.cobra

Re:sliding door
« Risposta #12 il: 24 Giugno, 2012, 11:23:57 »
@PierBin ecco ... Pier mi ricordavo di averlo visto da qualche parte .... ma non ricordavo il link .... ed era proprio questo !!!  ;D

Mitico GDR  ;)


Forse meglio evitare mootools, se non erro lì dovrebbe esserci... comunque stessa cosa e già trattata ma non ricordo dove si fa tranquillamente con jquery:


http://www.gdrtestdesign.altervista.org/jquery%20image%20menu/

peppe990

  • Nuovo arrivato
  • *
  • Post: 63
Re:sliding door
« Risposta #13 il: 30 Giugno, 2012, 19:31:11 »
Forse meglio evitare mootools, se non erro lì dovrebbe esserci... comunque stessa cosa e già trattata ma non ricordo dove si fa tranquillamente con jquery:


http://www.gdrtestdesign.altervista.org/jquery%20image%20menu/


Scusatemi, si posso ingrandire le immagini in altezza? e cambiare l'ordine di visualizzaione, cioè che sia la prima a sinistra a stare aperta?

Grazie

O.T. siamo in finale  ;D ;D ;D

PierBin

  • Utente esperto
  • ***
  • Post: 323
Re:Effetto sliding door
« Risposta #14 il: 30 Giugno, 2012, 20:29:14 »
devi modificare il file jimgmenu.css
e poi il codice html
<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#nogo">Landscapes</a></li> PRIMA A SINISTRA
    <li class="people"><a href="#nogo">People</a></li>
    <li class="nature"><a href="#nogo">Nature</a></li>
    <li class="abstract"><a href="#nogo">Abstract</a></li>
    <li class="urban"><a href="#nogo">Urban</a></li> QUELLA CHE RIMANE APERTA A DESTRA
  </ul>
</div>