Galería de imágenes en SharePoint 2007 con jQuery

La necesidad de crear una galería de imágenes en SharePoint es bastante común. Estuve probando varias alternativas que encontré disponibles en la web y elegí una de Alexander Bautz por las siguientes razones:

• Utiliza jQuery
• Compatible con SharePoint 2007 y 2010
• No requiere instalación del lado del servidor
• He usado muchos componentes de Alexander y son muy robustos
• Tienes varias opciones de configuración

Introducción

El componente y el artículo que lo explica lo pueden descargar desde este enlace, en donde encontrarán:

• Una librería que contiene el código principal que no necesitan modificar, exceptuando que quieran cambiar algo respecto al idioma (los botones de navegación por ejemplo)
• El código que deben insertar en la CEWP en donde desean ver la galería

El resultado es una galería como la siguiente:

Verán que tienen muchas opciones de configuración que a continuación transcribo:

• listGuid: The GUID of the list you will pull information from – see below for instructions getting this GUID
• listBaseUrl: The base URL (site URL, not list URL) of the site containing the list to pull from
• listViewGuid: The GUID of the view you will pull information from – see below for instructions getting this GUID
• viewFields: An array of all the fields you want to include – using FieldInternalName
• viewFieldsStyle: An array that corresponds with the above array. Used to set an individual CSS style of the value
• imageMax: Object literal with the parameters “height” and “width”. This represents the max-height OR the max-width of images that are either pulled from a picture library, or from a hyperlink field configured as “Image”. This does NOT apply to images embedded in a rich text field. Use only one parameter at the time to keep the image aspect ratio. The one not specified should have the value null
• containerID: A unique ID (unique in the current page) for the slideshow container.
• containerHeight: Height in pixles
• containerWidth: Width in pixles
• containerBorderStyle: CSS style for the border of the container
• containerBgColor: Background color of the container
• containerBgImg: Background image to use for the container
• inDir: The direction to scroll in the content (n,nv,ne,s,sv,se,v,e)
• outDir: The direction to scroll out the content (n,nv,ne,s,sv,se,v,e or fade)
• displayTime: How long to display each slide – in milliseconds
• slideTime: The slide time – in milliseconds
• readMoreLink: true or false
• readMoreText: If the above parameter is true – the text or image to click to go to DispForm for the specific item
• addNewLink: true or false
• addNewText: If the above parameter is true – the text or image to click to add a new item to the list
• emptyCaution: If the list view contains no items – this is the text displayed in the first (and only) slide

Simplificación

Aún a costa de perder algunas opciones de configuración, me he tomado el atrevimiento de hacer una función que llame a este componente para que sea más fácil de utilizar por usuarios finales. La función también “embellece” un poco los estilos.

La función armada es la siguiente:

function galeria ( guid_lista, guid_vista, url_sitio, foto_ancho, foto_alto, id_contenedor) {

    var myScrSettings = {'listGuid':guid_lista,
    'listBaseUrl':url_sitio,
    'listViewGuid':guid_vista,
    'viewFields':[],   
    'viewFieldsStyle':['padding:5px;font-size:16px','padding:5px;font-style:italic','text-align:center'],
    'imageMax':{height:foto_alto,width:null},
    'containerID':id_contenedor,
    'containerHeight':foto_alto,
    'containerWidth':foto_ancho,
    'containerBorderStyle':'border:1px solid #aaaaaa; padding: 5px; background-color: #F9F9F9',
    'containerBgColor':'#F7F7F7',
    'containerBgImg':'',
    'inDir':'e',
    'outDir':'v',
    'displayTime':3000,
    'slideTime':1500,
    'readMoreLink':false,
    'readMoreText':"<img title='Go to item' src='/_layouts/images/magnify.gif' border='0'>",
    'addNewLink':false,
    'addNewText':"<img title='Add new item' src='/_layouts/images/newitem.gif' border='0'>",
    'emptyCaution':"<div style='height:100%;width:100%;padding-top:140px;text-align:center'>No existen imágenes para mostrar..."};
   
    init_fillScrollableDiv(myScrSettings);

}

Forma de uso

Los dos pasos para utilizar el componente son:

1. Insertar una CEWP (elemento web de edición de contenido)

2. Con el botón “Editor de Código Fuente” agregar el siguiente código

<script type="text/javascript" src="/sites/Intranet/Internal/SlideshowForSharePoint.js"></script>

<script type="text/javascript" src="/sites/Intranet/Internal/Generales.js"></script>

<script type="text/javascript">       
   galeria ('6DF5C04A-A196-4F9C-9521-66F3F2363D53', '250AA0DC-9E04-49DB-A112-23D403B8C0C9', '/sites/Intranet', 690, 509, 'gale1');
</script>

Importante: la función galería recibe 6 parámetros que se deben completar:

1. ID de la lista (nuestra librería de imágenes)
2. ID de la vista (la vista que muestra las imágenes)
3. URL del sitio: la url del sitio, no de la lista
4. El ancho de las imágenes
5. El alto de las imágenes
6. Un identificador para el componente (se puede poner siempre el mismo, salvo en los casos que necesitemos poner dos visores en la misma página, se explica más abajo)

¿Cómo se obtienen los datos para los tres primeros parámetros?

La forma más simple de hacerlo es ir a la vista de las imágenes que se quiere mostrar en SharePoint y con el botón derecho del mouse usar la opción “Ver código Fuente” (View Source) de Internet Explorer.

Una vez dentro del código fuente, buscar el texto “ctx.listName”. Aparecerá algo así:

ctx.listName = "{5452F855-04AD-4D66-8D82-023985BE89AD}";

Lo resaltado en rojo, es el GUID de la lista y constituye el primer parámetro

Luego buscamos “ctx.view” y aparecerá:

ctx.view = "{44C717B1-5027-4D34-8B12-3C596CAFE533}";

Lo que está en rojo es el segundo parámetro.

Finalmente buscamos “L_Menu_BaseUrl” y aparecerá algo así:

var L_Menu_BaseUrl="/sites/blablabla";

Lo resaltado en rojo es el tercer parámetro.

¿Cómo agregar más de una galería en la misma página?

Cambian dos cosas en la segunda galería:

• No se requieren incluir las referencias a las librerías
• Hay que cambiar el valor del último parámetro

Por ejemplo algo así:

<script type="text/javascript">
galeria ('6DF5C04A-A196-4F9C-9521-66F3F2363D53', '250AA0DC-9E04-49DB-A112-23D403B8C0C9', '/sites/Intranet', 690, 509, 'gale2');
</script>

 

Más información

Alexander publicó el artículo también en este enlace. Les puede ser útil especialmente por los comentarios con las dudas.

Eso es todo por hoy, cualquier duda sólo me consultan. Hasta la próxima!