principiante e jquery

**branzino** · 03-10-2012, 12:03

Salve a tutti, sono un neofita e sto cercando di inserire una galleria jquery in un sito che sto realizzando, ora non ostante copio esattamente tutto l'index demo della galleria nel mio sito, non mi carica la galleria bensì le immagini una sull'altra con le dimensioni originali

, qualcuno sarebbe così paziente da spiegarmi cosa sbaglio e magari suggerirmi le linee guida per usare jquery, visto che non mi è molto chiaro, posso anche mandarvi il codice e il demo che ho scaricato...
grazie infinite in anticipo

**linoma** · 03-10-2012, 12:10

Dovresti postare qualcosa che ci permetta di vedere il codice.

**branzino** · 03-10-2012, 12:16

QUESTO è IL MIO CODICE

<!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>don't care about uno index</title>
<style type="text/css">
@import url("css/style.css");
@import url("css/galleria.classic.css");

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script src="galleria.classic.min.js"></script>

<script type="text/javascript">

</script>

</head>

<body>

<div id="container">

<div id="layout">

<div id="nav">
<ul>[*] [img]immagini/immagini/home-clean_03.png[/img][*] [img]immagini/immagini/home-clean_04.png[/img][*] [img]immagini/immagini/home-clean_05.png[/img][*] [img]immagini/immagini/home-clean_06.png[/img][/list]
</div>
<div id="galleria">

<a href="immagini/foto dont/1-img.jpg">
[img]immagini/foto dont/1-img.jpg[/img]
</a>
<a href="immagini/foto dont/5-img.jpg">
[img]immagini/foto dont/5-img.jpg[/img]
</a>
</div>
</div>
</div>
<script>

// Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria');

</script>
</body>
</html>

**branzino** · 03-10-2012, 12:16

QUESTO è IL CODICE DELLA DEMO

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Galleria Classic Theme</title>
<style>

/* Demo styles */
html,body{background:#222;margin:0;}
body{border-top:4px solid #000;}
.content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;}
h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
p{margin:0 0 20px}
a {color:#22BCB9;text-decoration:none;}
.cred{margin-top:20px;font-size:11px;}

/* This rule is read by Galleria to define the gallery height: */
#galleria{height:320px}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script src="../../galleria-1.2.8.min.js"></script>

</head>
<body>
<div class="content">
<h1>Galleria Classic Theme</h1>

Demonstrating a basic gallery example.</p>

<div id="galleria">

<a href="../../../../sito UNO/immagini/foto dont/1-img.jpg">
[img]../../../../sito UNO/immagini/foto dont/1-img.jpg[/img]
</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/1000px-Icebergs_in_the_High_Arctic_-_20050907.jpg">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/1000px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg/1000px-9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.j pg/1000px-Grj%C3%B3tagj%C3%A1_caves_in_summer_2009_%282%29.j pg">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg/1000px-20091128_Loutra_Thermes_Xanthi_Thrace_Greece_2.jpg ">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Polish_Army_Ko%C5%82obrzeg_077.JPG/1024px-Polish_Army_Ko%C5%82obrzeg_077.JPG">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/20100213_Zlatograd_Bulgaria_3.jpg/1024px-20100213_Zlatograd_Bulgaria_3.jpg">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg/1024px-FEMA_-_5399_-_Photograph_by_Andrea_Booher_taken_on_09-28-2001_in_New_York.jpg">

</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Antennae%2C_Hubble_images.jpg/1024px-Antennae%2C_Hubble_images.jpg">

</a>
</div>

<p class="cred">Made by Galleria.</p>
</div>

<script>

// Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria');

</script>
</body>
</html>

**linoma** · 03-10-2012, 12:25

I vari javascripts inclusi sono caricati correttamente? Dovresti dare una sistemata al codice è illeggibile. Sembra che

codice:

<script src="../../galleria-1.2.8.min.js"></script>

sia differente

**branzino** · 03-10-2012, 12:32

sto lavorando con dreamweaver, i fogli javascript me li carica, per quanto riguarda il mio codice cosa devo sistemare?

**branzino** · 03-10-2012, 13:01

grande, avevi ragione il problema era quello, grazie mille

**branzino** · 03-10-2012, 14:13

scusa posso approfittare della tua pazienza? se io volessi le icone delle immagini laterali invece che sotto, cosa dovrei modificare? ti posto il css

/* Galleria Classic Theme 2012-08-07 | https://raw.github.com/aino/galleria/master/LICENSE | (c) Aino */

#galleria-loader{height:1px!important}

.galleria-container {
position: relative;
top:100px;
left:25%;
overflow: hidden;
background-opacity:0%;
}
.galleria-container img {
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.galleria-stage {
position: absolute;
top: 0px;
bottom: 60px;
left: 0px;
right: 0px;
overflow:hidden;
}
.galleria-thumbnails-container {
height: 50px;
top:0px;
position: absolute;
left: 10px;
right: 10px;
z-index: 2;
}
.galleria-carousel .galleria-thumbnails-list {
margin-left: 30px;
margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
height: 40px;
width: 60px;
background: #000;
margin: 0 5px 0 0;
border: 1px solid #000;
float: left;
cursor: pointer;
}
.galleria-counter {
position: absolute;
bottom: 10px;
left: 10px;
text-align: right;
color:#000;
font: normal 11px/1 arial,sans-serif;
z-index: 1;
}
.galleria-loader {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: none;
background: url(classic-loader.gif) no-repeat 2px 2px;
}
.galleria-info {
width: 50%;
top: 15px;
left: 15px;
z-index: 2;
position: absolute;
}
.galleria-info-text {
background-color: #000;
padding: 12px;
display: none;
/* IE7 */ zoom:1;
}
.galleria-info-title {
font: bold 12px/1.1 arial,sans-serif;
margin: 0;
color: #fff;
margin-bottom: 7px;
}
.galleria-info-description {
font: italic 12px/1.4 georgia,serif;
margin: 0;
color: #bbb;
}
.galleria-info-close {
width: 9px;
height: 9px;
position: absolute;
top: 5px;
right: 5px;
background-position: -753px -11px;
opacity: .5;
filter: alpha(opacity=50);
cursor: pointer;
display: none;
}
.notouch .galleria-info-close:hover{
opacity:1;
filter: alpha(opacity=100);
}
.touch .galleria-info-close:active{
opacity:1;
filter: alpha(opacity=100);
}
.galleria-info-link {
background-position: -669px -5px;
opacity: .7;
filter: alpha(opacity=70);
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #000;
}
.notouch .galleria-info-link:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.touch .galleria-info-link:active {
opacity: 1;
filter: alpha(opacity=100);
}
.galleria-image-nav {
position: absolute;
top: 50%;
margin-top: -62px;
width: 100%;
height: 62px;
left: 0;
}
.galleria-image-nav-left,
.galleria-image-nav-right {
opacity: .3;
filter: alpha(opacity=30);
cursor: pointer;
width: 62px;
height: 124px;
position: absolute;
left: 10px;
z-index: 2;
background-position: 0 46px;
}
.galleria-image-nav-right {
left: auto;
right: 10px;
background-position: -254px 46px;
z-index: 2;
}
.notouch .galleria-image-nav-left:hover,
.notouch .galleria-image-nav-right:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.touch .galleria-image-nav-left:active,
.touch .galleria-image-nav-right:active {
opacity: 1;
filter: alpha(opacity=100);
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right {
cursor: pointer;
display: none;
background-position: -495px 5px;
position: absolute;
left: 0;
top: 0;
height: 40px;
width: 23px;
z-index: 3;
opacity: .8;
filter: alpha(opacity=80);
}
.galleria-thumb-nav-right {
background-position: -578px 5px;
border-right: none;
right: 0;
left: auto;
}
.galleria-thumbnails-container .disabled {
opacity: .2;
filter: alpha(opacity=20);
cursor: default;
}
.notouch .galleria-thumb-nav-left:hover,
.notouch .galleria-thumb-nav-right:hover {
opacity: 1;
filter: alpha(opacity=100);
background-color:#000;
}
.touch .galleria-thumb-nav-left:active,
.touch .galleria-thumb-nav-right:active {
opacity: 1;
filter: alpha(opacity=100);
background-color:#000;
}
.notouch .galleria-thumbnails-container .disabled:hover {
opacity: .2;
filter: alpha(opacity=20);
background-color: transparent;
}

.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right {
display: block;
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right {
background-image: url(classic-map.png);
background-repeat: no-repeat;
}

Discussione: principiante e jquery

Strumenti discussione

Ricerca discussione

Visualizza

principiante e jquery

Permessi di invio