Las palabras de mis pensamientos

Estos últimos días estuve tirando taaaantas flechas para configurar un plugin de Image Zoom en jQuery en una página.
Al final, con ayuda, lo logré hacer. Creo que el problema era que a pesar de que ya he instalado plugins de este tipo más sencillos, no hay de verdad una explicación clara para aquellos que como yo, no programamos sino sólo diseñamos. Es verdad, la mayoría de estos plugins tienen explicación paso a paso, pero hay elementos que para los programadores es OBVIO de cómo usarlos, pero para otros no jeje :$
En fin, quisiera explicar con palabras de una NO-programadora cómo entiendo yo estos plugins. Espero poder ampliar esta información mientras vaya aprendiendo más cosas. (Corríjanme si coloco una barbaridad por favor!!!)
Tomaré como ejemplo el siguiente plugin: JQZoom (http://www.mind-projects.it/jqzoom_v10)
En primer lugar, traten de usar plugins que tengan archivos para descargar, en lugar de sólo ver un ejemplo. Entonces bueno, bájense los documentos y abran su PHP para instalarlo.
En este caso primero hay que copiar las líneas que llaman a los archivos .js y a los .css y pegarlas antes de :

<script src=”js/jquery-1.2.6.js” type=”text/javascript”></script>

Y

<script src=”js/jquery.jqzoom-1.0.1.js” type=”text/javascript”></script>

En Dreamweaver si le san clic derecho a la parte del code donde está el nombre del .js pueden chequear si está bien la url del archivo. A mi me sucede a veces que cambio la ubicación del archivo y se me olvida cambiar la ruta en el code luego paso horas preguntándome por qué no funciona jejejeje.
Luego hay que añadir también antes de cerrar la etiqueta del head, las líneas que llamen al archivo de javascript que tiene las funciones del plugin:

$(document).ready(function(){
$(‘.MYCLASS’).jqzoom();
});

Esto a mi me enreda un poco porque no sé dónde colocarlo. Ahora sé que va antes del head y entre etiquetas OJO CON ESTOOO!!

Donde dice MYCLASS hay que escribir el nombre de la clase que en este caso es jqzoom.

Este plugin en específico tiene la característica de que uno puede cambiar algunas opciones del mismo. En este caso, en lugar de pegar el code que coloqué anteriormente, colocamos este:

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: “right” //and MORE OPTIONS
};
$(‘.MYCLASS’).jqzoom(options);
});

Siempre entre etiquetas script y cambiando lo de MYCLASS.

En ese script es donde personifico el plugin. Ya aprendí que NO DEBO NUNCA tocar el .js y modificarlo ahí directamente. Los plugins se personalizan del modo que aquí explico. A no ser que sepas burda de esto, a diferencia de yo, y te lances a tocar el JS.

En este plugin aparecen las siguientes opciones adicionales:

• zoomType
‘standard’
The other admitted option value is ‘reverse’,this is characterized by image opacity.
• zoomWidth
200
The popup window width showing the zoomed area.
• zoomHeight
200
The popup window height showing the zoomed area.
• xOffset
10
The popup window x offset from the small image.(always positive value if the ‘position’ option is ‘right/left’, positive/negative if the ‘position’ option is ‘top/bottom’.
• yOffset
0
The popup window y offset from the small image.(positive/negative value if the ‘position’ option is ‘right/left’, always positive if the ‘position’ option is ‘top/bottom’.
• position
‘right’
The popup window position.Admitted values:’right’ ,’left’ ,’top’ ,’bottom’
• lens
true
if setted to false,the small lens,over the image, won’t show.
• imageOpacity
0.2
Set the image opacity when the ‘zoomType’ option is setted to ‘reverse’.
• title
true
Show a small title over the image it can be the anchor title and if not specified,it will get the small image title.
• showEffect
‘show’
The Effect by which showing the popup window.Options available: ‘show’ ,’fadein’.
• hideEffect
‘hide’
The Effect by which hiding the popup window.Options available: ‘hide’ ,’fadeout’.
• fadeinSpeed
‘fast’
Changes fade in speed,in case the showEffect option is setted to ‘fadein’.(options: ‘fast’,'slow’,'medium’)
• fadeoutSpeed
‘slow’
Changes fade out speed,in case the hideEffect option is setted to ‘fadeout’.(options: ‘fast’,'slow’,'medium’)
• showPreload
true
Show the preload loading indicator.(options: ‘true’,'false’)
• preloadText
‘Loading zoom’
Option to customize the preload indicator text.
• preloadPosition
‘center’

By default the preload indicator is centered over the small image.You can optionally use the ‘bycss’ option letting you to change its position by css.
Es decir, si quiere cambiar el texto que aparece cuando el Zoom carga las imágenes a ampliar colocaría en el script lo siguiente:

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: “right”,
preloadText: “Cargando”
};
$(‘.jqzoom’).jqzoom(options);
});

Hay que tomar en cuenta que cuando quiero añadir una línea nueva pongo una COMA (,) y abajo escribo la nueva línea. La última línea no lleva coma. Pendiente con esto jejejeje
Por último incluimos los vínculos en la tabla donde queremos que aparezcan las imágenes con su Zoom:

<a title=”MYTITLE” href=”images/BIGIMAGE.JPG”>
<img title=”IMAGE TITLE” src=”images/SMALLIMAGE.JPG” alt=”" />
</a>

Hay que hacer un link de estos para cada imagen. El href es para la imagen ya ampliada, el img src es el thumb o imagen pequeña.

Espero esto sirva de ayuda para otras personas. De verdad no es muy complicado implementar estos plugins, sólo hace falta paciencia para lograr interpretar el código y ver cómo funciona. No hace falta, en algunos casos como en este, saber programar.

Aquí el resultado del plugin como yo lo coloqué: http://www.novios2000.com/mod.php?op=salonshowprensa