Insertar galleria de imagenes
Publicado por Manue (1 intervención) el 30/04/2015 22:10:42
Buenas, soy nuevo con Dreamweaver y no tengo demasiadas nociones de programación, pero bueno por algo se empieza. La cuestión es que quería insertar una galeria de imagenes, y como no sabía muy bien como crearla, conseguí unos códigos para crearla que son estos:
Lo que pasa, es que cuando lo abro como html o lo veo dentro del Dreamweaver en diseño o en vivo, si que veo bien la galleria con las imágenes, pero cuando le doy para ver dentro del Dreamweaver en un navegador veo las imágenes "rotas" ( vamos que no se ve nada, excepto el tipico logo de una imagen q no ha cargado). Exactamente, no sé lo que tengo que hacer, sé que tengo el Jquery UI y el Jquery Mobile, y hay por hay un lado he leído algo de Jquery, y no sé si tengo q bajarme algo o que he hecho mal. Si alguien me podría dar una respuesa, se lo agradecería. Gracias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Navigator Skin 02 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script type="text/javascript" src="../js/jssor.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
init_jssor_slider1 = function (containerId) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
} };var jssor_slider1 = new $JssorSlider$(containerId, options);
};</script>
<!--#region Jssor Slider Begin --> <!-- To move inline styles to css file/block, please specify a class name for each element. --><div id="slider1_container" style="position: relative; width: 600px;
height: 300px; overflow: hidden;">
<!-- Slides Container --><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img u="image" src="../img/photography/002.jpg" /></div>
<div><img u="image" src="../img/photography/003.jpg" /></div>
<div><img u="image" src="../img/photography/004.jpg" /></div>
<div><img u="image" src="../img/photography/005.jpg" /></div>
</div>
<!--#region Arrow Navigator Skin Begin --> <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html --><style>
/* jssor slider arrow navigator skin 02 css */ /*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
*/.jssora02l, .jssora02r {
display: block; position: absolute; /* size of arrow element */ width: 55px; height: 55px; cursor: pointer;background: url(../img/a02.png) no-repeat;
overflow: hidden; }.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
</style>
<!-- Arrow Left --><span u="arrowleft" class="jssora02l" style="top: 123px; left: 8px;">
</span>
<!-- Arrow Right --><span u="arrowright" class="jssora02r" style="top: 123px; right: 8px;">
</span>
<!--#endregion Arrow Navigator Skin End --><a style="display: none" href="http://www.jssor.com">Slider Javascript</a>
<!-- Trigger --><script>
init_jssor_slider1("slider1_container");
</script>
</div>
<!--#endregion Jssor Slider End --></body>
</html>
Lo que pasa, es que cuando lo abro como html o lo veo dentro del Dreamweaver en diseño o en vivo, si que veo bien la galleria con las imágenes, pero cuando le doy para ver dentro del Dreamweaver en un navegador veo las imágenes "rotas" ( vamos que no se ve nada, excepto el tipico logo de una imagen q no ha cargado). Exactamente, no sé lo que tengo que hacer, sé que tengo el Jquery UI y el Jquery Mobile, y hay por hay un lado he leído algo de Jquery, y no sé si tengo q bajarme algo o que he hecho mal. Si alguien me podría dar una respuesa, se lo agradecería. Gracias.
Valora esta pregunta
0