javascript - plugin - Cómo se hace una imagen abierta en colorbox desplazable
javascript colorbox (3)
Me gustaría que las imágenes que abro en colorbox se muestren en tamaño completo sin aplicarles el cambio de tamaño y luego aplicar barras de desplazamiento para permitir la visualización de las imágenes más grandes. Algunas de mis imágenes son bastante altas y las cosas se pixelan cuando cambian de tamaño.
Actualmente colorbox simplemente cambia el tamaño de mis imágenes hasta el tamaño de la altura / ancho disponible. ¿Hay alguna manera de hacer que todas las imágenes se muestren de tamaño completo con desbordamiento desplazable en colorbox?
Estoy vinculando directamente a una imagen:
<a href="/myimage.png" title="My Image" class="colorbox imagefield imagefield-imagelink imagefield-field_portfolio_screenshot initColorbox-processed cboxElement" rel="gallery-12">
<img src="/thumb/myimage.png" alt="image" title="My Image" class="imagecache imagecache-portfolio_screenshot_thumb" height="50" width="50">
</a>
Puede hacerlo abriendo la imagen en el marco usando colorbox
Simplemente agregue ?foo=.php a URL y establezca un ancho y / o altura menor que el valor de la imagen.
http://example.com/example.jpg
http://example.com/example.jpg?foo=.php
$(''a.gallery'').colorbox({height:''50%''});
No quiero atacar cadenas de consulta en mi url, así que se me ocurrió esto.
$(document).ready(function(){
var height = ((window.innerHeight || $window.height()) - 100);
var width;
$(".iframed-image").each(function() {
$("<img/>").attr("src", $(this).attr(''href'')).load(function() {
width = this.width;
});
$(this).colorbox({
html: ''<div style="overflow-y:scroll;height:'' + height + ''px;width:'' + width + ''px;"><img src="'' + $(this).attr(''href'') + ''" /></div>''
});
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://yourjavascript.com/15102656623/jquery-colorbox-min-1-6-4.js"></script>
</head>
<body>
<h2>Image in iframe</h2>
<p><a href="http://lorempixel.com/640/1044/" title="Random 640x1044 image" class="iframed-image">Random 640x1044 Image in iframe</a></p>
</body>
</html>