Dreamweaver - Insertar galleria de imagenes

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder