none
Carrusel de Imágenes MVC RRS feed

 > 

  • Pregunta

  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    Hola Buenas Tardes, quisiera pedirles de favor si alguien me puede guiar,

    necesito desarrollar una aplicación en MVC donde utilice una galeria de imágenes que este recorriéndose automáticamente

    en un intervalo de tiempo, no tengo la idea, les agradecería mucho...

    miércoles, 19 de noviembre de 2014 22:36
    |

Respuestas

  • Question
    Inicie sesión para votar
    2
    Inicie sesión para votar

    Carrousel basico

    en el head de su pagina agregue lo siguiente

    <head>
    <title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
     $(".slider #1").show("fade",500);
     $(".slider #1").delay(5500).hide("slide",{direction: "left"},500);
      
        var sc = $(".slider img").size();
        var count = 2

        setInterval(function(){
            $(".slider #"+count).show("slide",{direction:"right"},500);
            $(".slider #"+count).delay(5500).hide("slide",{direction: "left"},500);

if(count==sc)
   count=1
else
   count=count+1
        },6500);
    });

</script>
  
</head>

    En el body las fotos

    <body >
    <div class="slider">
        <img id="1" src="img/foto1.jpg" border="0" alt=""/>
        <img id="2" src="img/foto2.jpg" border="0" alt="" />
        <img id="3" src="img/foto3.jpg" border="0" alt="" />
</div>

    y la hoja de estilo es asi

     .slider{
width:800px;
height:350px;

margin:30px auto;
background-image: url(img/loading.gif);
background-repeat:no-repeat;
background-;}

.slider img {
width: 800px;
height: 350px;
display:none;}

    Modificar el tamaño de sus fotos en el estilo

    saludos


    G. Poliovei


    • Editado George Poliovei sábado, 22 de noviembre de 2014 18:24
    • Marcado como respuesta Rafiñña domingo, 23 de noviembre de 2014 4:43
    sábado, 22 de noviembre de 2014 18:24
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    hola

    podrias usar un componente de jquery

    http://sorgalla.com/jcarousel/

    aunque hay muchas implementaciones

    45+ Best jQuery Carousel Plugins

    saludos

    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Rafiñña sábado, 22 de noviembre de 2014 5:12
    jueves, 20 de noviembre de 2014 14:52
    |

Todas las respuestas

  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    hola

    podrias usar un componente de jquery

    http://sorgalla.com/jcarousel/

    aunque hay muchas implementaciones

    45+ Best jQuery Carousel Plugins

    saludos

    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Rafiñña sábado, 22 de noviembre de 2014 5:12
    jueves, 20 de noviembre de 2014 14:52
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar
    Leandro gracias por responder, una pregunta mas para hacer que funcione en un proyecto hecho no tendra un tutorial, para ver que tendría que remplazar y que agregar.
    viernes, 21 de noviembre de 2014 1:23
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    la verdad no sabria que tutorial pasarte porque depende de que componente de carousel vayas a utilizar

    cada uno dispone de su documentacion de como utilizarlo, el resto es realizar pruebas y aprender a usar esa libreria o componente javascript

    saludos

    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    viernes, 21 de noviembre de 2014 4:10
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar
    Ya implemente uno de la lista que me dio, no me salio del todo, pero seguiré modificando gracias!
    sábado, 22 de noviembre de 2014 5:11
    |
  • Question
    Inicie sesión para votar
    2
    Inicie sesión para votar

    Carrousel basico

    en el head de su pagina agregue lo siguiente

    <head>
    <title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
     $(".slider #1").show("fade",500);
     $(".slider #1").delay(5500).hide("slide",{direction: "left"},500);
      
        var sc = $(".slider img").size();
        var count = 2

        setInterval(function(){
            $(".slider #"+count).show("slide",{direction:"right"},500);
            $(".slider #"+count).delay(5500).hide("slide",{direction: "left"},500);

if(count==sc)
   count=1
else
   count=count+1
        },6500);
    });

</script>
  
</head>

    En el body las fotos

    <body >
    <div class="slider">
        <img id="1" src="img/foto1.jpg" border="0" alt=""/>
        <img id="2" src="img/foto2.jpg" border="0" alt="" />
        <img id="3" src="img/foto3.jpg" border="0" alt="" />
</div>

    y la hoja de estilo es asi

     .slider{
width:800px;
height:350px;

margin:30px auto;
background-image: url(img/loading.gif);
background-repeat:no-repeat;
background-;}

.slider img {
width: 800px;
height: 350px;
display:none;}

    Modificar el tamaño de sus fotos en el estilo

    saludos


    G. Poliovei


    • Editado George Poliovei sábado, 22 de noviembre de 2014 18:24
    • Marcado como respuesta Rafiñña domingo, 23 de noviembre de 2014 4:43
    sábado, 22 de noviembre de 2014 18:24
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar
    Gracias George Poliovei por tomarse el tiempo de explicarme como hacerlo eres muy gentil, lo are enseguida.
    domingo, 23 de noviembre de 2014 4:43
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    No olvide agregar sus rutas de archivo

     <img id="3" src="img/foto3.jpg" border="0" alt="" />
    aca por ejemplo la imagen se encuentra en la carpeta img usted ponga la suya

    lo mismo para los

    <script type="text/javascript" src="jquery.js"></script>

    los nombres de fotos pueden ser cualquiera solo debe respetar el orden correlativo de los id de las fotos

    G. Poliovei

    domingo, 23 de noviembre de 2014 6:32
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar
    Si gracia @George Poliovei muy amable 
    domingo, 23 de noviembre de 2014 16:55
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    hola George, tengo una cunsulta sobre su codigo, estoy realizando un proyecto mvc en visual basic, y me gustaria realizar un carrousel de imagenes las cuales se encuentran en mi directorio, en principio el directorio puede estar vacio, el usuario puede cargar imagenes o no, en el momento de cargar imagenes, me gustaria que si existen aparezca el carrousel con ellas y al pinchar sobre una que se abra, ¿eso seria posible con ese codigo?

    un saludo

    y muchas gracias

    viernes, 23 de febrero de 2018 10:59
    |
  • Question
    Inicie sesión para votar
    0
    Inicie sesión para votar

    hola que tal, hace mucho tiempo que se escribió este hilo, me ha llegado una notificación al correo, lamentablemente ya no estoy utilizando .NET en mis actuales desarrollos, le sugiero que abra un hilo nuevo dado que imagino dicha tecnología ha avanzado en todos sus flancos.

    Pero mas allá de lo dicho anteriormente y en respuesta a su pregunta puntual yo implementaría un webservice para realizar lo que necesita. entonces en el código usted solo debería cambiar la porción 

    <img id="3" src="img/foto3.jpg" border="0" alt="" />

    con código javascript

    saludos

    G. Poliovei

    viernes, 23 de febrero de 2018 13:22
    |