29/04/2014, 03:54
| |||
| |||
| Galería de imágenes con preview de Thumbnails Hola no se si ve este tema aquí, si no es así moverlo donde sea conveniente. Esto probando esta galería: http://www.jqueryeasy.com/2011/12/09...de-thumbnails/ Me bajo la demo y al probarlo en Chrome no me funciona, en otros navegadores si, en cambio en el ejemplo si que funciona en Chrome El código solo llama a la hoja de estilos y al jquery, pero no se que es lo que puede fallar. Alguien que me pueda echar un cable Gracias |
|
29/04/2014, 04:12
| |||
| |||
| Respuesta: Galería de imágenes con preview de Thumbnails Te refieres a esta linea Código HTML: <div id="loader" class="loader"></div> |
|
29/04/2014, 05:33
| |||
| |||
| Respuesta: Galería de imágenes con preview de Thumbnails Ahh me estaba volviendo loco ya jeje Código HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Sweet Thumbnails Preview Gallery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Sweet Thumbnails Preview Gallery with jQuery" /> <meta name="keywords" content="jquery, thumbnails preview, image gallery, sliding"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div class="bg_image"><img src="images/bg.jpg" alt=""/></div> <div id="loader" class="loader"></div> <div class="wrapper"> <h1>Sweet Thumbnails Preview Gallery</h1> <div id="ps_container" class="ps_container"> <div class="ps_image_wrapper"> <!-- First initial image --> <img src="images/1.jpg" alt="" /> </div> <!-- Navigation items --> <div class="ps_next"></div> <div class="ps_prev"></div> <!-- Dot list with thumbnail preview --> <ul class="ps_nav"> <li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li> <li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li> <li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li> <li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li> <li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li> <li><a href="images/6.jpg" rel="images/thumbs/6.jpg">Image 6</a></li> <li><a href="images/7.jpg" rel="images/thumbs/7.jpg">Image 7</a></li> <li><a href="images/8.jpg" rel="images/thumbs/8.jpg">Image 8</a></li> <li><a href="images/9.jpg" rel="images/thumbs/9.jpg">Image 9</a></li> <li><a href="images/10.jpg" rel="images/thumbs/10.jpg">Image 10</a></li> <li class="ps_preview"> <div class="ps_preview_wrapper"> <!-- Thumbnail comes here --> </div> <!-- Little triangle --> <span></span> </li> </ul> </div> </div> <div class="footer"> <a href="http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/">back to the Codrops tutorial</a> <a href="http://www.flickr.com/photos/geishaboy500/" target="_blank">Images by Geishaboy500</a> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> /* the images preload plugin */ (function($) { $.fn.preload = function(options) { var opts = $.extend({}, $.fn.preload.defaults, options), o = $.meta ? $.extend({}, opts, this.data()) : opts; return this.each(function() { var $e = $(this), t = $e.attr('rel'), i = $e.attr('href'), l = 0; $('<img/>').load(function(i){ ++l; if(l==2) o.onComplete(); }).attr('src',i); $('<img/>').load(function(i){ ++l; if(l==2) o.onComplete(); }).attr('src',t); }); }; $.fn.preload.defaults = { onComplete : function(){return false;} }; })(jQuery); </script> <script type="text/javascript"> $(function() { //some elements.. var $ps_container = $('#ps_container'), $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'), $ps_next = $ps_container.find('.ps_next'), $ps_prev = $ps_container.find('.ps_prev'), $ps_nav = $ps_container.find('.ps_nav'), $tooltip = $ps_container.find('.ps_preview'), $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'), $links = $ps_nav.children('li').not($tooltip), total_images = $links.length, currentHovered = -1, current = 0, $loader = $('#loader'); /*check if you are using a browser*/ var ie = false; if ($.browser.msie) { ie = true;//you are not!Anyway let's give it a try } if(!ie) $tooltip.css({ opacity : 0 }).show(); /*first preload images (thumbs and large images)*/ var loaded = 0; $links.each(function(i){ var $link = $(this); $link.find('a').preload({ onComplete : function(){ ++loaded; if(loaded == total_images){ //all images preloaded, //show ps_container and initialize events $loader.hide(); $ps_container.show(); //when mouse enters the pages (the dots), //show the tooltip, //when mouse leaves hide the tooltip, //clicking on one will display the respective image $links.bind('mouseenter',showTooltip) .bind('mouseleave',hideTooltip) .bind('click',showImage); //navigate through the images $ps_next.bind('click',nextImage); $ps_prev.bind('click',prevImage); } } }); }); function showTooltip(){ var $link = $(this), idx = $link.index(), linkOuterWidth = $link.outerWidth(), //this holds the left value for the next position //of the tooltip left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2, //the thumb image source $thumb = $link.find('a').attr('rel'), imageLeft; //if we are not hovering the current one if(currentHovered != idx){ //check if we will animate left->right or right->left if(currentHovered != -1){ if(currentHovered < idx){ imageLeft = 75; } else{ imageLeft = -75; } } currentHovered = idx; //the next thumb image to be shown in the tooltip var $newImage = $('<img/>').css('left','0px') .attr('src',$thumb); //if theres more than 1 image //(if we would move the mouse too fast it would probably happen) //then remove the oldest one (:last) if($ps_preview_wrapper.children().length > 1) $ps_preview_wrapper.children(':last').remove(); //prepend the new image $ps_preview_wrapper.prepend($newImage); var $tooltip_imgs = $ps_preview_wrapper.children(), tooltip_imgs_count = $tooltip_imgs.length; //if theres 2 images on the tooltip //animate the current one out, and the new one in if(tooltip_imgs_count > 1){ $tooltip_imgs.eq(tooltip_imgs_count-1) .stop() .animate({ left:-imageLeft+'px' },150,function(){ //remove the old one $(this).remove(); }); $tooltip_imgs.eq(0) .css('left',imageLeft + 'px') .stop() .animate({ left:'0px' },150); } } //if we are not using a "browser", we just show the tooltip, //otherwise we fade it // if(ie) $tooltip.css('left',left + 'px').show(); else $tooltip.stop() .animate({ left : left + 'px', opacity : 1 },150); } function hideTooltip(){ //hide / fade out the tooltip if(ie) $tooltip.hide(); else $tooltip.stop() .animate({ opacity : 0 },150); } function showImage(e){ var $link = $(this), idx = $link.index(), $image = $link.find('a').attr('href'), $currentImage = $ps_image_wrapper.find('img'), currentImageWidth = $currentImage.width(); //if we click the current one return if(current == idx) return false; //add class selected to the current page / dot $links.eq(current).removeClass('selected'); $link.addClass('selected'); //the new image element var $newImage = $('<img/>').css('left',currentImageWidth + 'px') .attr('src',$image); //if the wrapper has more than one image, remove oldest if($ps_image_wrapper.children().length > 1) $ps_image_wrapper.children(':last').remove(); //prepend the new image $ps_image_wrapper.prepend($newImage); //the new image width. //This will be the new width of the ps_image_wrapper var newImageWidth = $newImage.width(); //check animation direction if(current > idx){ $newImage.css('left',-newImageWidth + 'px'); currentImageWidth = -newImageWidth; } current = idx; //animate the new width of the ps_image_wrapper //(same like new image width) $ps_image_wrapper.stop().animate({ width : newImageWidth + 'px' },350); //animate the new image in $newImage.stop().animate({ left : '0px' },350); //animate the old image out $currentImage.stop().animate({ left : -currentImageWidth + 'px' },350); e.preventDefault(); } function nextImage(){ if(current < total_images){ $links.eq(current+1).trigger('click'); } } function prevImage(){ if(current > 0){ $links.eq(current-1).trigger('click'); } } }); </script> </body> </html> |
|
29/04/2014, 05:34
| |||
| |||
| Respuesta: Galería de imágenes con preview de Thumbnails Y el CSS
Código:
*{
margin:0;
padding:0;
}
body{
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
text-transform:uppercase;
text-shadow: 1px 1px 2px #ccc;
font-size:14px;
background:#333;
color:#333;
}
h1{
font-size:32px;
padding:20px;
color:#fff;
z-index:999;
position:relative;
font-weight:normal;
}
.loader{
width:70px;
height:70px;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
opacity:0.7;
z-index:1000;
background:#fff url(../images/loader.gif) no-repeat center center;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
-moz-box-shadow:0px 0px 5px #999;
-webkit-box-shadow:0px 0px 5px #999;
box-shadow:0px 0px 5px #999;
}
.bg_image img{
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:0;
}
.footer{
position:fixed;
top:10px;
right:10px;
z-index:999999;
}
.footer a{
color:#888;
text-decoration:none;
text-shadow:1px 1px 1px #fff;
font-size:12px;
padding-right:20px;
}
.footer a:hover{
color:#000;
}
/* Preview Slider Gallery Style */
.ps_container{
display:none;
width:680px;
height:500px;
margin:20px auto 0px auto;
position:relative;
}
.ps_image_wrapper{
width:680px;
height:450px;
overflow:hidden;
position:relative;
margin:0 auto;
-moz-box-shadow:0px 0px 5px #999;
-webkit-box-shadow:0px 0px 5px #999;
box-shadow:0px 0px 5px #999;
}
.ps_image_wrapper img{
position:absolute;
left:0px;
top:0px;
}
.ps_prev,
.ps_next{
width:30px;
height:59px;
position:absolute;
top:50%;
margin-top:-40px;
cursor:pointer;
opacity:0.5;
}
.ps_prev{
background:transparent url(../images/prev.png) no-repeat top center;
left:-50px;
}
.ps_next{
background:transparent url(../images/next.png) no-repeat top center;
right:-50px;
}
.ps_prev:hover,
.ps_next:hover{
opacity:0.9;
}
ul.ps_nav{
list-style:none;
margin:0;
padding:0;
width:170px;
margin:20px auto;
position:relative;
}
ul.ps_nav li{
float:left;
}
ul.ps_nav li a{
display:block;
text-indent:-9000px;
width:11px;
height:11px;
outline:none;
padding:0px 3px;
background:transparent url(../images/dot.png) no-repeat top center;
}
ul.ps_nav li a:hover,ul.ps_nav li.selected a{
background-position:50% -11px;
}
ul.ps_nav li.ps_preview{
display:none;
width:85px;
height:91px;
top:-95px;
left:-34.5px; /*First item, next ones is leftDot - 0.5*wThis + 0.5*wDot, i.e. second one is (16 - 42.5 + 8) = -18.5 */
position:absolute;
}
ul.ps_nav li.ps_preview span{
background:transparent url(../images/triangle.png) no-repeat top center;
width:15px;
height:6px;
position:absolute;
top:85px;
left:35px;
}
.ps_preview_wrapper{
width:75px;
height:75px;
border:5px solid #fff;
overflow:hidden;
position:relative;
-moz-box-shadow:0px 0px 5px #999;
-webkit-box-shadow:0px 0px 5px #999;
box-shadow:0px 0px 5px #999;
}
.ps_preview_wrapper img{
position:absolute;
top:0px;
left:0px;
}
|
| Etiquetas: |
