Simple CMS Gestión de Datos [Cuarta parte]

En esta Cuarta parte crearemos Sistema de Transición de imágenes para nuestro CMS Para cual recurriremos a las mismas herramientas:

Block de notas: en cualquier pc
WampServer: Wamp



Que conocimientos necesito?
Nuevamente solo son necesarios conocimientos básicos pero en este caso de:
HTML
CSS
JavaScript



Bien con esto ya podemos Comenzar esta ves dividiremos el CMS en 3 Partes fáciles



Parte 1: Creado los objetos

Primero que nada crearemos un DIV que contendrá las imágenes.
Luego insertamos cada imagen una detrás de otra.

[color=#000000]
    <div id="Contenedortancicion">
        <img src="Imagenes/1.jpg" id="subs1" class="subs">
        <img src="Imagenes/2.jpg" id="subs2" class="subs">
        <img src="Imagenes/3.jpg" id="subs3" class="subs">
        <img src="Imagenes/4.jpg" id="subs4" class="subs">
    </div>
 [/color]

Obligatorio:
1- Que cada imagen tenga un ID Diferente
2- Que cada Imagen tenga la Class Igual a las demas
3- Que el DIV tenga un id

Nota: Abran notado que lo escribí mal pero eso es solo por que soy medio analfabeta.



Parte 2: Creado El CSS

No olviden que para poner codigo CSS en una pagina de formato Html Tenemos que poner en el medio

[color=#000000] <style> //Código del CSS ira aquí </style> [/color]

Bien primero modificaremos el DIV osea el contenedor de las imagenes

[color=#000000] 
#Contenedortancicion /* Es el nombre que le pusimos el Div */
{
    position:relative; /* Posicion Relativa */
    background-color:#555; /* Color de Fondo */
    margin:auto; /* Centrado en la pantalla */
    width:800px; /* Ancho */
    height:400px; /* Alto */
    overflow:hidden; /* Vista en los limites */
    border-radius:15px; /* Borde Redondeado */
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); /* Sombra */
}
[/color]

En todo esto lo indispensable para el funcionamiento es:

[color=#000000]
position:relative; /* Posicion Relativa */
width:800px; /* Ancho */
height:400px; /* Alto */
overflow:hidden; /* Vista en los limites */
[/color]

El resto solo lo Hace mas bonito

Una ves terminado esto creamos el CSS parra cada imagen:

[color=#000000]
.subs
{
    border-radius:inherit; /* Borde redondeado */
    position:absolute; /* Posicion Absoluta, osea superpuestos */
    opacity:0; /* Lo hacemos opaco, osea invisible */
    width:inherit; /* Toma el ancho del Div */
    height:inherit; /* Toma el Alto del Div */
    transition: opacity 2s linear; /* Crea la animacion entre imagenes */
}
[/color]

Y en este CSS todo es importante, una ves terminado no olviden cerrar la etiqueta:

[color=#000000] <style> //Código del CSS ira aquí </style> [/color]

Nota: No olviden que al referirse a un ID de un objeto se antepone el # luego el nombre del objeto pero con las CLASS se usa el . antes del nombre.

Una ves aquí el CSS ya esta armado solo falta el cambio de imagen.



Parte 3: Creado El JavaScript

Nota: Funciona igual que el CSS una apertura y un cierre solo que el nombre es diferente osea:

[color=#000000] <script> //Código del CSS ira aquí </script> [/color]

Bien espesemos por lo sencillo crear las primeras variables y mostrar la primera imagen

[color=#000000] 
    var i = 1;
    var maxi = 4;
    document.getElementById("subs"+i).style.opacity = 1;
[/color]

Creamos la variable I de indice que nos indicara que imagen se esta usando la variable MAXI que es el numero de imágenes que usamos en mi caso 4 y luego mostramos la primera imagen dándole opacity = 1

Una ves echo esto crearemos la función que cambiara la imagen:

[color=#000000]
    function cambia()
    {
    }
[/color]

Luego ocultamos la imagen que esta actualmente visible

[color=#000000]
        imagen = document.getElementById("subs"+i);
        imagen.style.opacity = 0;
[/color]

Ahora evaluamos el indice diciendole que una ves que si el indice es menor al valor maximo que aumente pero una ves que sean iguales i sera igual a 1

[color=#000000]
            if (i < maxi)
            {i++}
            else
            {i = 1}
            imagen = document.getElementById("subs"+i);
[/color]

Luego solo queda mostrar la siguiente imagen:

[color=#000000]
            imagen = document.getElementById("subs"+i);
            imagen.style.opacity = 1;
[/color]

una ves aqui ya esta listo pero falta algo y es que la funcion sea llamada por eso dentro de:

[color=#000000] <script> //Código del CSS ira aquí </script> [/color]

Ponemos

[color=#000000]
    setInterval("cambia()",3000);
[/color]

y ya hasta aquí esta terminado todo el código al finalizarlo debería de ser algo así.

[color=#000000]
<style>
#Contenedortancicion /* Es el nombre que le pusimos el Div */
{
    position:relative; /* Posicion Relativa */
    background-color:#555; /* Color de Fondo */
    margin:auto; /* Centrado en la pantalla */
    width:800px; /* Ancho */
    height:400px; /* Alto */
    overflow:hidden; /* Vista en los limites */
    border-radius:15px; /* Borde Redondeado */
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); /* Sombra */
}

.subs
{
    border-radius:inherit; /* Borde redondeado */
    position:absolute; /* Posicion Absoluta, osea superpuestos */
    opacity:0; /* Lo hacemos opaco, osea invisible */
    width:inherit; /* Toma el ancho del Div */
    height:inherit; /* Toma el Alto del Div */
    transition: opacity 2s linear; /* Crea la animacion entre imagenes */
}

</style>
    <div id="Contenedortancicion">
        <img src="Imagenes/1.jpg" id="subs1" class="subs">
        <img src="Imagenes/2.jpg" id="subs2" class="subs">
        <img src="Imagenes/3.jpg" id="subs3" class="subs">
        <img src="Imagenes/4.jpg" id="subs4" class="subs">
    </div>
<script>
    var i = 1;
    var maxi = 4;
    document.getElementById("subs"+i).style.opacity = 1;
    
    function cambia()
    {
        imagen = document.getElementById("subs"+i);
        imagen.style.opacity = 0;
            if (i < maxi)
            {i++}
            else
            {i = 1}
            imagen = document.getElementById("subs"+i);
            imagen.style.opacity = 1;
    }
    
    setInterval("cambia()",3000);

</script>
[/color]

Y al terminarlo veremos algo como esto



Nota muy importante: Disculpen el Tamaño del gif es que el Internet en Paraguay es malisimo y no me cargaba una de alta calidad

aqui ya esta terminado pero mejor seria con los botones de siguiente y anterior no

En el CSS

[color=#000000]
.cambio:hover
{
    opacity:1;
}

#ante
{
    float:left;
}

#sig
{
    float:right;
}
[/color]

En el contenido

[color=#000000] 
        <a href="#" onClick="anterior()"><div id="ante" class="cambio"> < </div></a>
        <a href="#" onClick="Siguiente()"><div id="sig" class="cambio"> > </div></a>
[/color]

y en el JavaScript usaremos la función anterior como siguiente y crearemos la de atrás.

[color=#000000] 
    function Siguiente()
    {
        imagen = document.getElementById("subs"+i);
        imagen.style.opacity = 0;
            if (i < maxi)
            {i++}
            else
            {i = 1}
            imagen = document.getElementById("subs"+i);
            imagen.style.opacity = 1;
    }
    
    function anterior()
    {
        imagen = document.getElementById("subs"+i);
        imagen.style.opacity = 0;
            if (i > 1)
            {i--}
            else
            {i = maxi}
            imagen = document.getElementById("subs"+i);
            imagen.style.opacity = 1;
    }
[/color]

Y este sera el código obtenido

[color=#000000] 
<style>
#Contenedortancicion
{
    position:relative;
    background-color:#555;
    margin:auto;
    width:600px;
    height:300px;
    overflow:hidden;
    border-radius:15px;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
}

.subs
{
    border-radius:inherit;
    position:absolute;
    opacity:0;
    width:inherit;
    height:inherit;
    transition: opacity 1s linear;
}

.cambio
{
    width:20px;
    height:60px;
    background:#EEE;
    opacity:0;
    transition: opacity 1s linear;
}

.cambio:hover
{
    opacity:1;
}

#ante
{
    float:left;
}

#sig
{
    float:right;
}

</style>
    <div id="Contenedortancicion">
        <img src="Imagenes/1.jpg" id="subs1" class="subs">
        <img src="Imagenes/2.jpg" id="subs2" class="subs">
        <img src="Imagenes/3.jpg" id="subs3" class="subs">
        <img src="Imagenes/4.jpg" id="subs4" class="subs">
        <a href="#" onClick="anterior()"><div id="ante" class="cambio"> < </div></a>
        <a href="#" onClick="Siguiente()"><div id="sig" class="cambio"> > </div></a>
    </div>
<script>
    var i = 1;
    var maxi = 4;
    document.getElementById("subs"+i).style.opacity = 1;
    
    function Siguiente()
    {
        imagen = document.getElementById("subs"+i);
        imagen.style.opacity = 0;
            if (i < maxi)
            {i++}
            else
            {i = 1}
            imagen = document.getElementById("subs"+i);
            imagen.style.opacity = 1;
    }
    
    function anterior()
    {
        imagen = document.getElementById("subs"+i);
        imagen.style.opacity = 0;
            if (i > 1)
            {i--}
            else
            {i = maxi}
            imagen = document.getElementById("subs"+i);
            imagen.style.opacity = 1;
    }
    
    setInterval("Siguiente()",8000);

</script>
[/color]

Resultado:




Y ya esta lista la transición.

Y con esto finalista el post esta abierto a todos los comentarios y cualquier dudad mándame un MP y yo te ayudo

Vista del CMS hasta ahora



Para los que le interesen aqui pueden ver la pagina: CMS