JQuery desde mi Portal con SharePoint 2010 – Parte 4 (Slider de Imágenes)

Uno de los requerimientos más comunes en cuanto a diseño en portales es el uso de animaciones sobre el contenido publicado, por ejemplo el uso común de slider para mostrar imágenes dinámicamente que alimentemos en una biblioteca de imágenes.

Para lograr esta funcionalidad jquery nos sirve inmensamente, en Internet podemos encontrar varias animaciones trabajadas con jquery que están disponibles de manera gratuita y podemos reutilizar a nuestro gusto sobre SharePoint, yo elegí el uso de Nivo Slider: http://nivo.dev7studios.com/ pues su aplicación es sencilla.

Adicionalmente me base en 2 artículos que me sirvieron mucho durante este proceso:

http://sp365.co.uk/2011/09/making-use-of-the-nivo-slider-in-sharepoint/

https://www.nothingbutsharepoint.com/sites/eusp/Pages/Building-a-fully-featured-jQuery-content-slider-for-SharePoint-2010.aspx

A continuación paso a describir las actividades necesarias para lograr el resultado esperado:

1. Primero debemos descargar el archivo jquery.nivo.slider.pack.js de la página http://nivo.dev7studios.com/

2. Deberemos copiar dentro de Style Library, Scripts donde también se encuentra nuestra librería jquery.

3. Adicionalmente deberemos crear nuestro archivo actions.js para colocar nuestras funciones aquí.

4. Debemos abrir el archivo actions.js y pegar el siguiente código:

 $(document).ready(function() {
      var soapEnv = “<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’>
          <soapenv:Body>
            <GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’>
              <listName>Thumbs</listName>
              <viewFields>
                <ViewFields>
                  <FieldRef Name=’MiURL’ />
                </ViewFields>
              </viewFields>
            </GetListItems>
          </soapenv:Body>
        </soapenv:Envelope>”;
       
 $.ajax({
        url: “http://intranetdemo/_vti_bin/lists.asmx“,
        type: “POST”,
        dataType: “xml”,
        data: soapEnv,
        complete: renderSlides,
        contentType: “text/xml; charset=”utf-8″”
      });
     
    });
   
 function renderSlides(xData, status){
       $(xData.responseXML).find(“z\:row”).each(function() {
       var imgHtml = “<img src=’http://intranetdemo/” + $(this).attr(“ows_MiURL”) + “‘ alt=” />”;
         $(“#slider”).append(imgHtml);
     });

  $(“#slider”).nivoSlider();    
 }

En la etiqueta <listName></listName> debemos especificar el nombre de nuestra biblioteca de imágenes.

En FieldRef Name debemos especificar el nombre de nuestro campo de donde obtendremos la URL del elemento actual (En mi caso cree un campo MiURL y mediante un workflow en designer cada vez que creo un nuevo elemento lo actualizo con su respectiva URL)

En la función renderSildes construyo la etiqueta <img src=”” /> especificando mi campo MiURL pero debo anteponerle ows_

Al final se construye un HTML con todas las imágenes de mi biblioteca y los coloco en un DIV con Id Slider, este DIV lo especificaremos más adelante en nuestra página de SharePoint.

De la misma manera ejecuto el evento nivoSlider() sobre el DIV antes mencionado.

 5. A continuación deberemos copiar nuestras hojas de estilo: nivo-slider.css y themes/default.css que obtuvimos con la descarga de Nivo Slider. Estas hojas de estilo las consolidaremos en una sola que deberemos copiar en la ruta Style Library/Styles

 6. Ahora deberemos actualizar las referencias a nuestra hoja de estilo y scripts sobre nuestro Master Page.

Referencia a Nivo Slider

<script src=”http://mirul/Style Library/Scripts/jquery.nivo.slider.pack.js” type=”text/javascript”></script>

Referencia a Actions.js

<script src=”http://mirul/Style Library/Scripts/actions.js” type=”text/javascript”></script>

Referencia a la hoja de estilos:

 <SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/Styles/style.css %>” After=”corev4.css” runat=”server”/>

 7. Finalmente deberemos insertar el siguiente HTML sobre una página de SharePoint que hayamos creado:

<div id=”wrapper”  style=”width:100px”>
      <div class=”silder-wrapper theme-default”>
         <div id=”slider” class=”s4-notdlg”>
         </div>
     </div>
</div>

8. El resultado final será el siguiente:

 

http://stackoverflow.com/questions/7210294/sharepoint-trying-to-get-the-latest-id

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *