Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Elenco prodotti con jquery

    Salve vorrei creare un elenco di prodotti con jquery , sulla sinistra creo il menu e con toggle appare il submenu e fin qui ci siamo...vorrei che alla pressione dei submenu apparisse l'immagine del prodotto ,cosa che sono riuscito a fare

    $('#immagine').css("background-image", "url(mia_immagine.jpg) ");

    Il problema è che il sito deve essere responsive e per far apparire qualcosa devo dare al div immagine un altezza e una larghezza che ho dato in percentuale , per far apparire immagini ho poi inserito dei <br> e il risultato sembrerebbe buono se non che quando riduco le dimensioni della pagina l'immagine viene si ridotta ma perchè viene tagliata, c'è un modo migliore per effettuare questa operazione e far si che l'immagine venga rimpocciolita in percentuale?

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Ma nella spiegazione (non chiarissima) cosa centra jquery e js e comunque non mi sembra sia possibile ridimensionare delle immagini di sfondo
    Ultima modifica di cavicchiandrea; 30-09-2013 a 21:06
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Ma nella spiegazione (non chiarissima) cosa centra jquery e js e comunque non mi sembra sia possibile ridimensionare delle immagini di sfondo
    Chiedevo appunto se era possibile invece di cambiare il background-image fare in un altro modo ...

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Senza conoscere lo sviluppo del progetto credo sia impossibile fare ipotesi
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Senza conoscere lo sviluppo del progetto credo sia impossibile fare ipotesi
    ecco la pagina prodotti:

    codice:
    <?php
        include 'Parti/parti.php';
           echo $superiore;
    ?>
         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    
    <div class="row" id="contenuti">
        <div class="span3" id="menulat">
            <a href="#" id="processori" ><h4 >Processori</h4></a>
                <ul id="processori1"  style="display: none;">
                    <li><a href="#" id="proce1"><h5 >Amd</h5></a></li>
                    <li><a href="#" id="proce2"><h5 >Intel</h5></a></li>
                </ul>    
            
            <a href="#" id="video"><h4>Schede Videoi</h4></a>
    
        </div>    
        <div class="span 9" id="foto">
            
                <br>
        <br>
        <br>
        <br>
        <br><br>
        <br>
        <br>
        <br><br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br><br>
        <br>
        <br>
        <br><br>
        <br>
        <br>
        <br>
    
        </div>
    
    
    
    
    
    </div>
        
    
        <script>
            $( "#processori" ).click(function() {
            $( "#processori1" ).toggle( "slow" );
            });
    
    
            $('#proce1').click(function()
            {
              $('#foto').css("background-image", "url(img/articoloa.jpg) ");  
            });
    
            $('#proce2').click(function()
            {
              $('#foto').css("background-image", "url(img/articolob.jpg) ");  
            });
        </script>
    
    
    
    
    
    
    
    
        </div> <!-- Chiusura container -->
         <script src="js/bootstrap.min.js"></script>
         
    </body>
    </html>
    E il css

    codice:
    body{
        background-image: url('../img/bg01.png');
    }
    #container{
        text-align: center;
    }
    
    #testata{
      
        
    }
    
    #menu{
        text-align: center;
        margin-top: 50px;
        
    }
    #logo{
        margin-top: 30px;
    }
    
    #
    ul#menu {
        font-family: Verdana, sans-serif;
        font-size: 11px;
        text-shadow: 5px 1px 1px white;
        margin: 0;
        padding: 0;
        list-style: none;
    
    
    }
      
    ul#menu li {
        background-image: url('../img/metal.jpg');
        border-radius:10px 10px 0px 0px;
        border-bottom: 5px solid #FFA500;
        border-top: 2px solid #FFA500;
        border-left: 2px solid #FFA500;
        border-right: 2px solid #FFA500;
        display: block;
        width: 130px;
        height: 30px;
        margin: 2px;
        float: left; /* elementi su singola riga */
        transition: all 1800ms linear;
    }
      
    ul#menu li a {
        color: black;
        display: block;
        font-weight: bold;
        line-height: 30px;
        text-decoration: none;
        width: 150px;
        height: 30px;
        
    }
      
    ul#menu li:hover {
        background-color: #ADD8E6;
        border-bottom: 5px solid gray;
        transform: rotate(360deg);
    
    }
    #menu li.active{
        background-color: violet;
    
    }
    
    hr{
        color: #FFA500;
        background-color: #FFA500;
    }
    
    
    
    #menulat{
        border-right: 1px solid black;
    }
    
    #menulat a{
        color: grey;
    }
    #menulat li{
        list-style: none;
    }
    #foto{
        height: 50%;
        width: 70%;
        background-image: url('../img/intro.jpg') ;
        background-repeat:no-repeat;
    }
    Ultima modifica di pippuccio76; 01-10-2013 a 18:28

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.