Visualizzazione risultati 1 fino 8 di 8

Discussione: effetto grafico

  1. #1
    fendermx non è connesso Utente
    Data registrazione
    29-09-2005
    Messaggi
    115

    Predefinito effetto grafico

    Ciao a tutti..

    con un amico stiamo realizzando un progetto.. io alla programmazione lui alla grafica.

    questo progetto consiste in una gallery. ovviamente è in fase di programmazione (e anche la grafica è ancora temporanea.)

    qui vedete un esempio...

    come vedete per muoversi nell'album si utilizzano il segnalibro a destra e a sinistra.... è possibile, tramite css o javascript fare un effetto che questa linguetta (immagine sovrapposta) si sposti orizzontalmente facendo un effetto di movimento (come se uscisse dal libro) verso il lato della schermo piu vicino?

    oppure avete altri consigli? vi ringrazio

  2. #2
    tenam non è connesso Utente giovane
    Data registrazione
    26-01-2011
    Messaggi
    42

    Predefinito

    Ciao. E' possibile con js o ancora meglio (perchè più semplice) con jquery. Leggiti un po la guida su html.it e vedi che ne ricavi!

  3. #3
    fendermx non è connesso Utente
    Data registrazione
    29-09-2005
    Messaggi
    115

    Predefinito

    avevo gia guardato.. ma esempi che si avvicinavano alla mia richiesta non ne ho visti... altri consigli?

    inoltre volevo applcare questo http://leandrovieira.com/projects/jquery/lightbox/ per la visione a dimensione reale delle immagini...

    1.scaricato l'archivio e inserito nella cartella di lavoro
    2.ho inserito quanto segue

    Codice PHP:
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> 
    e

    Codice PHP:
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" /> 
    nella pagina di lavoro

    poi

    Codice PHP:
    <script type="text/javascript">
    $(function() {
        
        $(
    '#gallery a').lightBox(); // Select all links in object with gallery ID

    });
    </script> 

    e nello script che dinamicamente inserisce l'immagine ho inserito l'id

    Codice PHP:
    echo "<a id=\"galleria\" href=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\" target=\"blank\"><p align=\"center\" ><img src=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\"  height=\"220px\"  /></p></a>"


    quindi la mia pagina avrà la seguente testata:
    Codice PHP:
    <title>Galleria</title>
    <
    link href="vivivalpo.css" rel="stylesheet" type="text/css" />
    <
    link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />



    <
    script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
    <script type="text/javascript"> 

    $ (function () {
    // utilizzare questo esempio, oppure ... $ ('a [@ rel lightbox *=]') lightbox ();. 
    // Seleziona tutti i link che contiene in lightbox l'attributo rel 
    $('#gallery a').lightBox();
    // Seleziona tutti i link in oggetto con ID galleria 
    // Questo, o ... $ ('a. lightbox ') lightbox ();. 
    // Seleziona tutti i collegamenti con classe lightbox 
    // Questo, o ... $ (' a ') lightbox ();. 
    // Seleziona tutti i link nella pagina 
    // ... La possibilità sono molte Usa la tua creatività o scegliere uno degli esempi sopra riportati});. 

    </script>

    </head>
    <body> 
    e poi conterrà:

    Codice PHP:
    <div id="sxfoto"  class="float"><div id="gallery">
                    <?php 
                    
                    
    if(file_exists("./album/" .  $_GET['album'] . "/"$_GET['foto'] .".jpg")){ 
    echo 
    "<a  href=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\" target=\"blank\"><p align=\"center\" ><img src=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\"  height=\"220px\" alt=\"\" /></p></a>"//azione da eseguire se il file esiste 

    }else{ 
        echo 
    "<p align=\"center\" ><img src=\"./book_img/finito.jpg\"   height=\"220px\" /></p>"

    //azione da eseguire se il file non esiste

    }

                    
                    
                    
    ?>

    non funziona dove sbaglio?

    Vi ringrazio davvero tanto per l'aiuto che mi date ogni volta
    thanks...
    Ultima modifica di fendermx : 03-03-2011 alle ore 00.28.14

  4. #4
    L'avatar di exabyte
    exabyte non è connesso Utente attivo
    Data registrazione
    15-02-2011
    Messaggi
    288

    Predefinito

    Codice PHP:
    <script type="text/javascript">
    $(function() {
        
        $(
    '#gallery a').lightBox(); // Select all links in object with gallery ID

    });
    </script> 

    Codice PHP:
    echo "<a id=\"galleria\" href=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\" target=\"blank\"><p align=\"center\" ><img src=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\"  height=\"220px\"  /></p></a>"
    Qua devi mettere come id gallery e non galleria.. COme vedi nello script indica che l' ID è gallery ed è contenuto in un link, quindi diventa

    Codice PHP:
    echo "<a id=\"gallery\" href=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\" target=\"blank\"><p align=\"center\" ><img src=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\"  height=\"220px\"  /></p></a>"

  5. #5
    fendermx non è connesso Utente
    Data registrazione
    29-09-2005
    Messaggi
    115

    Predefinito

    purtroppo non va

    -

    o meglio.... funziona, ma solo sulla sinistra:

    Codice PHP:
    echo "<a id=\"gallery\" href=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\" target=\"blank\"><p align=\"center\" ><img src=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\"  height=\"220px\" alt=\"\" /></p></a>"//azione da eseguire se il file esiste 
    mentre a destra nulla...

    Codice PHP:
    echo "<a id=\"gallery\" href=\"album/" $_GET['album'] . "/$sum.jpg\" target=\"blank\"> <p align=\"center\" > <img src=\"album/" $_GET['album'] . "/$sum.jpg\"  height=\"220px\"  /></p></a>"
    non capisco il perchè..... idee?

    tutti e due sono in un div avente id="gallery".....

    -

    per quanto riguarda la lightbox ho risolto..

    mi rimane in sospeso il discorso

    come vedete per muoversi nell'album si utilizzano il segnalibro a destra e a sinistra.... è possibile, tramite css o javascript fare un effetto che questa linguetta (immagine sovrapposta) si sposti orizzontalmente facendo un effetto di movimento (come se uscisse dal libro) verso il lato della schermo piu vicino?


    ho provato a leggere in giro, ma non saprei proprio comefare...
    Ultima modifica di darkwolf : 03-03-2011 alle ore 13.13.59

  6. #6
    L'avatar di exabyte
    exabyte non è connesso Utente attivo
    Data registrazione
    15-02-2011
    Messaggi
    288

    Predefinito

    Prova così allora:

    Codice PHP:
    <script type="text/javascript">
    $(function() {
        
        $(
    '.gallery a').lightBox(); // Select all links in object with gallery ID

    });
    </script> 
    Codice PHP:
    echo "<a class=\"gallery\" href=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\" target=\"blank\"><p align=\"center\" ><img src=\"album/" $_GET['album'] . "/" $_GET['foto'] . ".jpg\"  height=\"220px\" alt=\"\" /></p></a>"//azione da eseguire se il file esiste 
    Codice PHP:
    echo "<a class=\"gallery\" href=\"album/" $_GET['album'] . "/$sum.jpg\" target=\"blank\"> <p align=\"center\" > <img src=\"album/" $_GET['album'] . "/$sum.jpg\"  height=\"220px\"  /></p></a>"

  7. #7
    Cicia00 non è connesso Neofita
    Data registrazione
    27-02-2011
    Messaggi
    1

    Predefinito

    grazie!!!

  8. #8
    fendermx non è connesso Utente
    Data registrazione
    29-09-2005
    Messaggi
    115

    Predefinito

    rieccomi....
    mi interessava questo effetto anche: http://www.webdesignerwall.com/demo/...ide-panel.html

    dove il codice si trova qui all'esempio 1 http://webdesignerwall.com/tutorials...-for-designers

    come posso portarmelo sul lato sinistro? ho provato a smanettare ma non riesco, anche xke la larghezza (che poi diventerà altezza portandolo sul lato sinistro) è legata alla lunghezza del body....

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •