<!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 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>
<!-- 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).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: '‹ Foto anterior',
nextLinkText: 'Siguiente foto ›',
nextPageLinkText: 'Siguiente ›',
prevPageLinkText: '‹ 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);