BtnOpen

Archivos de la Categoria ‘Scripts’

Jqzoom es un plugin para jQuery el cual te permite hacer un Zoom en tus imágenes de una maner fácil.

En la foto pequeña aparece un cuadro translúcido que sigue al ratón para ampliar la zona por donde pase.

Cómo instalar jqzoom

Jqzoom, zoom en imágenes con jQuery

Descargar Jqzoom

  

Alternativa a Iconize

Mayo 10th, 2008

Hace un tiempo publiqué un post sobre Iconize.

Es un código con CSS que sirve para poner un icono automáticamente a tus enlaces hacia archivos. Por ejemplo que al linkar a un pdf el link de este aparezca un icono de pdf y asi con cualquier fichero.
Al parecer este código no servia para IE6 (menuda novedad).
Así pues, a través de Blogandweb he encontrado una solución hecha en jQuery que sí funciona en IE6.

Alternativa a Iconize
Lo primero. Bajar la librería jQuery y enlazarla dentro de las etiquetas <head></head>

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

En el mismo después de incluir la librería jQuery incluimos el las siguientes funciones:

La primera función añade un estilo al enlace para cada tipo de extensión (PDF, ZIP, DOC).
La segunda función añade el atributo target="_blank" a todos los enlaces externos de nuestro site para que se ejecuten en una nueva ventana. (Muy útil).

HTML:
  1. <script type="text/javascript"></script>
  2. $(document).ready(function(){
  3.  
  4. //Definición de clases para cada tipo de archivo.
  5.  
  6. $("a[@href$=pdf]").addClass("pdf");
  7.  
  8. $("a[@href$=zip]").addClass("zip");
  9.  
  10. $("a[@href$=doc]").addClass("doc");
  11.  
  12. //Estilos y atributos a los enlaces externos.
  13.  
  14. $("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
  15.  
  16. .addClass("externo")
  17.  
  18. .attr({ target: "_blank" });
  19.  
  20. });

Código para los estilos en CSS para cada extensión:

HTML:
  1. .pdf {
  2. padding-left: 20px;
  3. background: transparent url(icono-pdf.png) left top no-repeat;
  4. }
  5.  
  6. .zip {
  7. padding-left: 20px;
  8. background: transparent url(icono-zip.png) left top no-repeat;
  9. }
  10.  
  11. .doc {
  12. padding-left: 20px;
  13. background: transparent url(icono-doc.png) left top no-repeat;
  14. }
  15.  
  16. .externo {
  17. padding-left: 20px;
  18. background: transparent url(icono-ext.png) left top no-repeat;
  19. }

Ahora cada vez que pongamos en nuesta web enlaces a archivos como estos, automáticamente nos aparecerán los iconos de archivo en los enlaces:

HTML:
  1. <a href="documento.pdf">Archivo PDF</a>
  2. <a href="documento.zip">Archivo ZIP</a>
  3. <a href="documento.doc">Archivo DOC</a>
  4. <a href="http://google.com">Enlace externo</a>
  5. <a href="http://undominio.com">Enlace externo</a>
  6. <a href="http://blogandweb.com">blogandweb</a>
  7. <a href="#enlaces">Enlace local </a>

  

Os dejo un código muy útil que detecta el tipo de navegador y su versión:

1. // Browser detection

2.3. // Internet Explorer

4. var ie  = document.all != null;  //ie4 and above

5. var ie5 = document.getElementById && document.all;

6. var ie6 = document.getElementById && document.all&&(navigator.appVersion.indexOf("MSIE 6.")>=0);

7.

8. // Netscape

9. var ns4 = document.layers != null;

10. var ns6 = document.getElementById && !document.all;

11. var ns  = ns4 || ns6;

12.

13. // Firefox14. var ff  = !document.layers && !document.all;

15.

16. // Opera17. var op  = navigator.userAgent.indexOf("opera")>0;

18. var op7 = op && operaVersion() <= 7;

19. var op8 = op && operaVersion()>= 8;

20.

21. // Detects the Opera version

22. function operaVersion() {

23. agent = navigator.userAgent;

24. idx = agent.indexOf("opera");

25. if (idx>-1) {

26. return parseInt(agent.subString(idx+6,idx+7));

27.}

28.}

Vía | informatica-practica.net

  

Add to Technorati Favorites BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog