Una de las demandas de quienes utilizan ActivInspire es que no dispone de efectos tipo animación como ciertos programas que solemos utilizar en el aula.

Aprovechando que últimamente estamos utilizando la herramienta HTML incrustado y que básicamente lo que hacemos es copiar código para mostrar el resultado, vamos a continuar por esa línea.

Hoy crearemos un slideshow que mostrará imágenes que tengamos alojadas en algún servicio de Internet de forma automática.

Copiamos y pegamos el siguiente código en la herramienta HTML incrustado.

<!DOCTYPE html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s()
{if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch")
.css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",
zIndex:-999999,margin:0,padding:0,height:"100%"
,width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />")
.css({position:"absolute",display:"none",
margin:0,padding:0,border:"none",zIndex:-999999,
maxWidth:"none"}).bind("load",function(d){var b=a(this),
e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target)
.width();d=this.height||a(d.target).height();n=e/d;q();
b.fadeIn(g.speed,function(){c.find(".deleteable").remove();
"function"==typeof l&&l()})}).appendTo(c);
0==a("body #backstretch").length&&(0===a(window)
.scrollTop()&&window.scrollTo(0,0),a("body").append(c));
c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch")
.bind("resize.backstretch",function()
{"onorientationchange"in window&&window.pageYOffset===0
&&window.scrollTo(0,1);q()})}}
function q(){try{j={left:0,top:0},rootWidth=h=o.width()
,rootHeight=r?window.innerHeight:o.height(),
f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,
g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,
k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),
c.css({width:rootWidth,height:rootHeight})
.find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}
var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),
g=c.data("settings")||t;c.data("settings");
var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);
b&&"function"==typeof b&&(l=b);a(document)
.ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,
e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],
g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];
o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||
b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")
&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")
&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
//<![CDATA[

      var images = [
"URL de la imagen",
"URL de la imagen",
"URL de la imagen",
"URL de la imagen",
"URL de la imagen",
"URL de la imagen",
  ];

$(images).each(function(){
    $("<img/>")[0].src = this;
  });

  var index = 0;
  $.backstretch(images[index], {speed: 500});

  setInterval(function() {
    index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

He puesto de color azul las partes que debemos modificar, donde pone URL de la imagen debemos escribir la dirección donde se encuentra la imagen a mostrar por ejemplo:

http://loquesea.com/imagenes/playa.jpeg

He puesto código para 6 imágenes, podéis añadir más líneas siempre escritas de la misma forma.

Casi al final del código tenemos 5000 ese el tiempo que transcurre entre cada imagen y que está en milisegundos.

Una vez adaptado a nuestras necesidades pulsamos el botón Aceptar.

video


Podéis modificar el tamaño del objeto, incluso que ocupe toda la página y quitar en las propiedades, la barra de botones, así mientras realizáis una presentación irán pasando las imágenes.

Deja un comentario