Ayuda con galería de imágenes jquery en Internet Explorer

  • Autor Autor adrianespasa
  • Fecha de inicio Fecha de inicio
A

adrianespasa

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

El problema que tengo hoy es el siguiente, termine de desarrollar el sitio Enlace eliminado (de paso si me quieren hacer alguna critica, me encantaria recibirla), y la seccion Enlace eliminado , 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 Enlace eliminado , 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:

Insertar CODE, HTML o PHP:
<!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>
		<!-- We only want the thunbnails to display when javascript is disabled -->
	<script type="text/javascript">
			document.write('<style>.noscript { display: none; }</style>');
		</script>
</head>
<body>
<div style="max-width:800px; max-height:400px;" id="container">
			  <!-- Start Advanced Gallery Html Containers -->
  <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 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>
				<!-- End Advanced Gallery Html Containers -->


				<!-- Add image link -->
				<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).text(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(isSync), 0.0, callback);
						caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
					},
					onTransitionIn:            function(slide, caption, isSync) {
						var duration = this.getDefaultTransitionDuration(isSync);
						slide.fadeTo(duration, 1.0);
						
						// 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 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 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/77261001@N00.jpg" alt="ringydingydo" />		\
									Photo taken by <a 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);
?>

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.
 
voy entrando al foro (HOY, 17 de septiembre).
Tu post fue hecho el 10, trato de ver tu problema, pero todo funca al 100%.

Será problema tuyo, o es que (en el lapso de 7 dias) ya has solucionado el problema ?
 
Acabo de ver recién hoy tu respuesta. Si, lo solucione en pocos días, cambiando y utilizando directamente otro recurso ajax.

El problema en si no era mio, sino que el mismo recurso, no era compatible con explorer.

Saludos!

voy entrando al foro (HOY, 17 de septiembre).
Tu post fue hecho el 10, trato de ver tu problema, pero todo funca al 100%.

Será problema tuyo, o es que (en el lapso de 7 dias) ya has solucionado el problema ?
 
Atrás
Arriba