integrare slide gallery jquery

[cagnaluia]

Ciao,

ho installato e configurato wb 2.8
con il template beautifullday
e modulo show_menu


ora vorrei integrare su una pagina una slide gallery in jquery

in particolare questa

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider


1. Ho copiato il contenuto del file zippato all'interno della directory del template.
2. Ho editato l'index.html del template in uso aggiungendo nell head queste informazioni

Code:

   <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>js/easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true,
                continuous: true,
                numeric: true
            });
        });    
    </script>
    <link href="<?php echo TEMPLATE_DIR; ?>css/screen.css" rel="stylesheet" type="text/css" media="screen" />    

e copiato le varie immagini dentro alla cartella "/media/slide/" della root di wb.

cercando di inserire questo codice all'interno della pagina che vado ad editare in CODICE_SORGENTE in amministrazione sito:

Code:

<div id="container">

    <div id="header">
        <h1>Easy Slider jQuery Plugin - Numeric and continuous demo</h1>
    </div>

    <div id="content">
   
        <div id="slider">
            <ul>                
                <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>            
            </ul>
        </div>
           
        <h3>Usage</h3>
   
<pre>$(document).ready(function(){    
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        numeric: true
    });
});</pre>

ora.. ho 2 problemi PENSO...


1. il css relativo al jquery... andrà sicuramente a cozzare con il css relativo al template..
allora, cosa posso fare?
copio incollo sul css relativo al template le informazioni strettamente necessarie al jquery.. wooooow.... che lavoraccio.



2. che percorso do a quelle immagini che dovrei rappresentare? e a tutte quelle riferite dal jquery?
?php echo TEMPLATE_DIR; ?> ? beh.. potrei spostarle sulla template dir e buona notte...
ma sarà così semplice?


ditemi voi.. qualche consiglio sul dafarsi?

[cagnaluia]

ok sistemato!


piccola guida:


1. copiare SOLO la porzione di codice all'interno del file .css di Easy Slider da
/* Easy Slider */
... codice ...
/* // Easy Slider */

2. incollare la porzione di codice CSS all'interno del file default.css relativo al template in uso.

3. rinominare default.css in default.css.old sul sito.

4. uploadare la versione aggiornata di default.css

5. sul file index.html relativo al template aggiungere queste righe

   <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true,
                continuous: true,
                numeric: true
            });
        });    
    </script>

6. come prima, fare sempre il backup del file e uploadare la versione modificata.

7. in amministrazione del sito web, creare una nuova pagina ed inserire il codice, usando la modalità CODICE SORGENTE

<div id="slider">
<ul>
    <li><a href="#"><img src="http://sito/wb/media/slide/01.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="http://sito/wb/media/slide/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="http://sito/wb/media/slide/03.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="http://sito/wb/media/slide/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="#"><img src="http://sito/wb/media/slide/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>

[Mte90]

non ti conviene mettere le immagini nella cartella template ma mettere il riferimento univoco al file.
io per esempio sul sito scasciafratte.it ho usato il modulo smoothgallery per wbs che ho modificato e aggiornato.
non ce ne erano in jquery per wbs e mi sono accontentato, al modulo basta che gli dai la cartella delle immagini, qualche opzione e ci pensa lui.