Como tener una galería de fotos en Silverlight en segundos


Primero accedemos a la comunidad CODEPLEX y buscamos el proyecto de SlideShow. URL: http://www.codeplex.com/SlideShow,

Bajamos el proyecto.

Requisitos:

  • Visual Studio 2008 y Silverlight Versión 1 Instalados.

slideshow001

Creamos un sitio web ASP.NE Web Site.

Agregamos en el HTML, los scripts siguientes:

slideshow002

<script type=”text/javascript” src=”Silverlight.js”></script>
<script type=”text/javascript” src=”SlideShow.js”></script>

Estos scripts los vamos a poder obtener del proyecto que descargamos de CodePlex en esta ruta.

slideshow003

Teniendo estos scripts los agregamos a nuestro proyecto Web.

slideshow004

Agregamos el siguiente HTML, en donde crearemos un control SlideShow.

slideshow005

<script type=”text/javascript”>
            new SlideShow.Control();
</script>

Si damos F5, podemos observar que se ha dibujado un cuadro de color negro en nuestra pagina .aspx.

slideshow006

Agregaremos lo siguiente:

slideshow0078

new SlideShow.Control(new SlideShow.XmlConfigProvider({url:”config.xml”}));

slideshow008

Agregamos un Archivo XML llamado config.xml

Copiamos este codigo en nuestro XML

<?xml version=”1.0″ encoding=”utf-8″ ?>
<configuration width=”600″ height=”400″ background=”Black”>

  <modules>
    <module type=”SlideViewer”/>
    <module type=”ProgressBar”/>
    <module type=”SlideDescription”/>
    <module type=”NavigationTray”>
      <option name=”thumbnailViewer.left” value=”83″/>
    </module>
  </modules>
  <transitions>
    <transition type=”FadeTransition” name=”CrossFadeTransition”/>
    <transition type=”WipeTransition” name=”WipeRightTransition”>
      <option name=”direction” value=”Right”/>
    </transition>
  </transitions>
</configuration>

Colocamos nuestra imagenes

galeriasilverlight01

 

Agregamos esta parte al config.xml

<dataProvider type=”XmlDataProvider”>
   <option name=”url” value=”data.xml”></option>
</dataProvider>

 

Y despues agregamos un data.xml

<?xml version=”1.0″ encoding=”utf-8″ ?>
<data transition=”WipeRightTransition”>
  <album title=”Titulo1″>
    <slide image=”Fotos1/1.jpg”/>
    <slide image=”Fotos1/2.jpg”/>
    <slide image=”Fotos1/3.jpg”/>
  </album>
</data>

 

Damos F5 y Listo

Podemos cambiar la forma de transicion

<?xml version=”1.0″ encoding=”utf-8″ ?>
<data transition=”CrossFadeTransition“>
  <album title=”Titulo1″>
    <slide image=”Fotos1/1.jpg”/>
    <slide image=”Fotos1/2.jpg”/>
    <slide image=”Fotos1/3.jpg”/>
  </album>
</data>

galeriasilverlight02

About these ads

9 Responses to Como tener una galería de fotos en Silverlight en segundos

  1. Carlos says:

    Hola, como puedo hacer para que me lea todas las imagenes que tengo dentro de una carpeta, pero sin tener que darlas de alta dentro de mi data.xml? algo asi como *.jpg

    Gracias

  2. Jose A. says:

    Hola realice todos los pasos que indicaste pero siempre me da un error

    line 156
    error XML parsing failed: not found

    Ignoro que pasa
    Sds.

  3. Oscar G. says:

    Realice el procedimiento paso a paso… ejecuto la aplicacion web, pero no genera nada en el explorador de windows, ya se encuentra instalado el framework de Silverlight. Que puede estar pasando???

  4. Oscar G. says:

    Error en tiempo de ejecución de Microsoft JScript: ‘configuration’ es nulo o no es un objeto

  5. Andy says:

    Hola amigos he visto la galeria de fotos de windows live, donde comparte las fotos todos los que tienen cuenta alli, bueno como puedo hacer una apgina igual en silverlight o si ya estan los control predeterminados, les agradezco mucho se ayuda
    gracias
    alguna consulta sobre detalles avisarme gracias

  6. Juan Manuel says:

    Excelente post, y excelenta el componente SlideShow de codeplex

  7. moha says:

    Hola, muy bueno el pekeño manula agrego ciertas cosas:

    Para el data.xml:

    El compañero arriba no nos dijo k habia k terminar el jiji un safis de seguro…

    Aparte como le hago para agregar muchas fotos sin agregarlas una a una???

    Gracias, Bless

  8. fgbvf says:

    Es por las comillas que te pega al copiar y pegar el contenido del archivo data.xml, cambia las comillas de la foto 2 y 3.

  9. ditmar says:

    Que ladilla tener que usar un XML, :D pero aún así buen articulo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 127 other followers

%d bloggers like this: