problema con recurso jquery, no funciona en internet explorer

adrianespasa · #1 (**permalink**) 10/09/2011, 23:46

xq sera que funciona todo perfecto, pero sieeempre con explorer tengo problema?
Si ya se.. xq es de Microsoft

El problema que tengo hoy es el siguiente, termine de desarrollar el sitio Documento sin título (de paso si me quieren hacer alguna critica, me encantaria recibirla), y la seccion Documento sin título , funciona perfecta en Firefox y Chrome, pero como podrán adivinar.. funciona mal en el bendito navegador Explorer.

Lo que uso en esa seccion, es la galeria de imagenes jquery Galleriffic | A jQuery plugin for rendering fast-performing photo galleries , la cual es compatible con explorer, ya que probe los demos en el mismo navegador.

Las fotos insertadas, son dinamicas (tomadas desde una base de datos, administrada por un gestor de contenido en php).

El codigo de galeria.php es el siguiente:

(EL CODIGO LO PONGO EN EL MENSAJE DE ABAJO, YA QUE SOBREPASA LOS 10000 caracteres el post)

Generalmente resumo los codigos, para que puedan ser leidos mas facilmente, pero esta vez tenia miedo de borrar algo importante, ya que de javascript entiendo muy muy poco.

El error que me tira explorer es el siguiente:
'e' no esta definido en galeria.php (el codigo de arriba).

Alguien tiene idea como solucionarlo, o como definir 'e'

Agradezco mucho la ayuda.

Saludos.

adrianespasa · #2 (**permalink**) 10/09/2011, 23:47

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<?php require_once('Connections/conectame.php'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}

mysql_select_db($database_conectame, $conectame);
$query_ver_productos = "SELECT * FROM productos ORDER BY id_productos DESC";
$ver_productos = mysql_query($query_ver_productos, $conectame) or die(mysql_error());
$row_ver_productos = mysql_fetch_assoc($ver_productos);
$totalRows_ver_productos = mysql_num_rows($ver_productos);
?>
<html>
<link href="estilos.css" rel="stylesheet" type="text/css">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Galleriffic | Insert an image into the gallery after initialization</title>
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-4.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>
<body>
<div style="max-width:800px; max-height:400px;" id="container">

<div id="gallery" style="pad" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="caption" class="caption-container"></div>
</div>
<div id="captionToggle">
<a href="#toggleCaption" class="off" title="Show Caption">Ver Descripción</a>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<?php do { ?>
<li>
<a rel="nofollow" class="thumb" name="leaf" href="files/<?php echo $row_ver_productos['imagen']; ?>" title="Title #0">
<img height="75px" width="75px" src="files/<?php echo $row_ver_productos['imagen']; ?>" alt="Title #0" />
</a>
<div class="caption">

<div class="image-title"><?php echo $row_ver_productos['titulo']; ?></div>
<div class="image-desc"><?php echo $row_ver_productos['descripcion']; ?></div>
</div>
</li>
<?php } while ($row_ver_productos = mysql_fetch_assoc($ver_productos)); ?>
</ul>
</div>



<div style="clear: both;"></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');

// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});

// Enable toggling of the caption
var captionOpacity = 0.0;
$('#captionToggle a').click(function(e) {
var link = $(this);

var isOff = link.hasClass('off');
var removeClass = isOff ? 'off' : 'on';
var addClass = isOff ? 'on' : 'off';
var linkText = isOff ? 'Hide Caption' : 'Show Caption';
captionOpacity = isOff ? 0.7 : 0.0;

link.removeClass(removeClass).addClass(addClass).t ext(linkText).attr('title', linkText);
$('#caption span.image-caption').fadeTo(1000, captionOpacity);

e.preventDefault();
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Comenzar',
pauseLinkText: 'Parar',
prevLinkText: '&lsaquo; Foto anterior',
nextLinkText: 'Siguiente foto &rsaquo;',
nextPageLinkText: 'Siguiente &rsaquo;',
prevPageLinkText: '&lsaquo; Anterior',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(slide, caption, isSync, callback) {
slide.fadeTo(this.getDefaultTransitionDuration(isS ync), 0.0, callback);
caption.fadeTo(this.getDefaultTransitionDuration(i sSync), 0.0);
},
onTransitionIn: function(slide, caption, isSync) {
var duration = this.getDefaultTransitionDuration(isSync);
slide.fadeTo(duration, 1.0);

adrianespasa · #3 (**permalink**) 10/09/2011, 23:48

// Position the caption at the bottom of the image and set its opacity
var slideImage = slide.find('img');
caption.width(slideImage.width())
.css({
'bottom' : Math.floor((slide.height() - slideImage.outerHeight()) / 2),
'left' : Math.floor((slide.width() - slideImage.width()) / 2) + slideImage.outerWidth() - slideImage.width()
})
.fadeTo(duration, captionOpacity);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
},
onImageAdded: function(imageData, $li) {
$li.opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
}
});

/**** Functions to support integration of galleriffic with the jquery.history plugin ****/

// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}

// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");

// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function() {
if (e.button != 0) return true;

var hash = this.href;
hash = hash.replace(/^.*#/, '');

// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);

return false;
});

/************************************************** **************************************/

/********************** Attach click event to the Add Image Link ************************/

$('#addImageLink').click(function(e) {
gallery.insertImage('<li> \
<a rel="nofollow" class="thumb" href="http://farm1.static.flickr.com/79/263120676_2518b40e5b.jpg" title="Dynamically Added Image">\
<img src="http://farm1.static.flickr.com/79/263120676_2518b40e5b_s.jpg" alt="Dynamically Added Image" />\
</a> \
<div class="caption"> \
<div class="download"> \
<a rel="nofollow" href="http://farm1.static.flickr.com/79/263120676_2518b40e5b_o_d.jpg">Download Original</a> \
</div> \
<div class="image-title">Dynamically Added Image</div> \
<div class="image-desc"> \
<img src="http://farm1.static.flickr.com/38/buddyicons/[email protected]" alt="ringydingydo" /> \
Photo taken by <a rel="nofollow" href="http://www.flickr.com/photos/ringydingydo/">ringydingydo</a> \
</div> \
</div> \
</li>', 5);

e.preventDefault();
});

/************************************************** **************************************/

/***************** Attach click event to the Remove Image By Index Link *****************/

$('#removeImageByIndexLink').click(function(e) {
if (!gallery.removeImageByIndex(5))
alert('There is no longer an image at position 5 to remove!');

e.preventDefault();
});

/************************************************** **************************************/

/***************** Attach click event to the Remove Image By Hash Link ******************/

$('#removeImageByHashLink').click(function(e) {
if (!gallery.removeImageByHash('lizard'))
alert('The lizard image has already been removed!');

e.preventDefault();
});

/************************************************** **************************************/
});
</script>
</body>
</html>
<?php
mysql_free_result($ver_productos);
?>

adrianespasa · #4 (**permalink**) 10/09/2011, 23:52

Disculpen, no se instertaron bien los links:

La pagina: www.lazosartetejido.com.ar
La seccion donde tengo el problema: http://www.lazosartetejido.com.ar/index.php?content=coleccion
El recurso jquery: http://www.twospy.com/galleriffic/