web gallery

31-05-2011, 13.26.43

Salve a tutti vorrei creare una semplice webgallery con slide foto automatico o manuale (cliccando su una freccia o numero o quel che sia), ho visto un po in giro e molti consigliano le jquery e devo dire la verità ho visto un esempio e mi piace molto e proprio quello che vorrei fare...

ecco l'esempio:

http://www.serie3.info/s3slider/demonstration.html

Ho visto che ci sono anche delle istruzioni ma non ci ho capito tanto bene...mi potete aiutare voi a creare questa webgallery da inserire in una tabella del mio sito?
Grazie!

P.s Se non è possibile e/o troppo complicato con questo metodo me ne indicate uno molto semplice da fare con css che dia piu o meno lo stesso effetto?

**sevenjeak** · 31-05-2011, 16.41.35

Non vedo cosa ci sia di difficile, basta includere nella pagina la libreria jquery, e questo script:

http://s3slider-original.googlecode....nk/s3Slider.js

Per poi proseguire come c'è scritto qui:

http://www.serie3.info/s3slider/index.php

Inserire ovviamente il codice html in una tabella, come del resto te vuoi, o sbaglio?

Se poi non riesci proprio a farlo puoi semplicemente scaricare lo script, sotto la voce setup credo.

Non ti resta altro che modificare le immagine nel codice html

Cmq, se vuoi, se conosci jquery credo sia meglio che ti studi lo script.

04-06-2011, 19.59.58

Ciao...innanzitutto grazie per la risposta, siccome io sono un neofita non so farlo, ho scaricato l'esempio dal sito trovando sia css che html, però non so come implementarlo al mio css cioe mi spiego meglio, io questa web gallery la vorrei nella table 1 del mio sito, nell'html basta che copio il codice cosi come sta nel div

Codice HTML:

<div id="table-1_"> codice html dell'esempio jquey </div>

mentre il codice css dove lo metto? Questo è il codice css del riquadro della tabella dove all'interno ci vorrei inserire la galleria...come fare? Per favore aiutami ;)

Codice:

#table-1_ {
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/table_1.gif);
	position:absolute;
	left:282px;
	top:235px;
	width:600px;
	height:225px;
}

questo è l'intero codice dell'esempio

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>s3Slider jQuery plugin</title>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
    width: 410px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}
#sliderContent {
    width: 410px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>
</head>

<body>

    <h2>Example 1</h2>
    <p>This show the layer appears from top or bottom.</p>
    <div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <a href=""><img src="example_images/410/1.jpg" alt="1" /></a>
                <span class="top"><strong>Title text 1</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <a href=""><img src="example_images/410/2.jpg" alt="2" /></a>
                <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/3.jpg" alt="3" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/4.jpg" alt="4" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/5.jpg" alt="5" />
                <span class="top"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
    </div>
    <!-- // slider -->

</body>
</html>

Discussione: web gallery

LinkBack

Strumenti discussione

Display

web gallery

come implementare il codice jquery?

Regole di scrittura