近日做个小站的时候从forum.ubuntu.org.cn得到启发,使用了其图片显示插件HighSlide(http://highslide.com/)。
这个插件的好处不说了,google上满版都是。
只是在使用的过程中,发现一个郁闷的问题,在FF中表现OK,但是在IE6里就抽筋了,点击图片不是弹出一个DIV层,而是跳到另外一个页面使用普通的显示图片的方式打开(此时地址栏里边是:http://localhost:xxx/xxx/xxx/ABC.jpg)。
调试了N久,发现是在我自己的css里有这样的代码:
body{
width: 1000px;
margin: 0 auto;padding:0px;
......
}
正是这个width导致了这个问题,这个宽度适当的调大
就可以解决这个问题。至于原因,等有空了再做研究。
或者,看到这篇小文的高手帮忙解答一下~
附html代码:
<html>
<head>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<title>test highslide</title>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = "rounded-white";
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
</script>
</head>
<body>
<div class="content">
<div>
<!-- flash here -->
<div class="indexleft">
<ul>
<#list model.gList as g>
<li>${g.title}</li>
</#list>
</ul>
</div>
<div class="indexright">
<div class="block">
<div class="images">
<a href="upload/images/big.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="upload/images/small.jpg" alt="Highslide JS" title="Click to enlarge" width="240px" height="180px"/>
</a>
<div class="highslide-caption">
<div class="producttitle">CXW-218-TV</div>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
价格: RMB 9,999.00<br/>
产地: 中国 江苏<br/>
颜色: 银白色<br/>
</div>
</div>
<div class="texts">
<div class="title"><a href="#">CXW-218-TV</a></div>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
价格: RMB 9,999.00<br/>
产地: 中国 江苏<br/>
颜色: 银白色<br/>
</div>
</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
Highslide-Gallery是一款广泛应用于网页中的高质量图片查看器,它为用户提供了一种优雅的方式来展示和浏览网站上的图像。Highslide的主要特点是其轻量级、可定制性和用户友好的交互体验,使得图片展示更加生动和吸引...
HighSlide 是一个功能丰富的JavaScript 图片和媒体展示库,它为网页设计师提供了优雅且高效的图片浏览体验。这个库特别适合那些希望在网站上添加高质量图片缩放、滑动以及弹出窗口效果的开发者。HighSlide 的核心...
HighSlide是一款功能强大的网页图像和内容展示插件,它以其高效、灵活和用户友好的特性在前端开发领域受到广泛欢迎。HighSlide的主要功能是提供优雅的弹出式图像查看器,同时支持各种媒体类型的嵌入,如图片、视频、...
这是一个很好的图片浏览特效,与lightbox特效相比,最大的优势在于它不需要将网页加载完就能加载特效了,可用在任何程序中。 浏览器兼容性: IE 8 beta 1 Works partly, waiting for more stable beta. IE 5.0...
在网页设计中,高质量的图片展示是吸引用户注意力的关键因素之一,而Highslide正好满足了这一需求。以下是关于Highslide图片放大效果的详细知识点: 1. **基本原理**: Highslide的原理是通过JavaScript动态加载大...
4. 配置扩展内容:如果需要在弹出窗口中显示文本,可以创建一个隐藏的`div`元素,设置其ID并与触发元素关联,Highslide会根据指定的ID找到并显示这部分内容。 5. 自定义样式:根据需要,可以通过`Style.css`和`...
例如,当用户点击Highcharts中的一个数据点时,可以弹出一个Highslide窗口显示该数据的详细信息或相关图片。这种组合方式在数据分析、报告展示或仪表板应用中非常常见,能够提供深度的用户体验,使数据的呈现更加...
标题中的“highslide可拖动的浮动层效果”指的是Highslide库中的一个特性,即创建的弹出窗口(或浮动层)不仅能够自动调整大小适应内容,还允许用户通过鼠标拖动来改变其在页面上的位置。这在展示图片、文字或其他...
总的来说,Highslide jQuery幻灯片插件是一个高效且灵活的解决方案,适用于那些希望在网站上创建美观、交互性强的媒体展示的开发者。通过深入研究提供的示例和配置选项,开发者可以轻松地将其集成到自己的项目中,为...
总的来说,Highslide JS v4.1.8是一个全面的图片特效解决方案,无论是在桌面端还是移动端,都能提供高质量的图片展示效果,是网页设计师和开发者的得力工具。通过下载并研究压缩包中的文件,例如codefans.net,你...
使用视觉Highslide编辑器来设置Highslide安装,无需编写代码。 快速而优雅。 不需要像Flash或Java插件。 弹出拦截器没有问题。打开浏览器窗口内活跃的内容。 单击。打开后的图像或HTML弹出,用户可以进一步滚动或离开...
Highslide 是一个流行的JavaScript 图像展示库,以其高质量的弹出式图像滑动效果而闻名。这个"highslide-4.1.9"版本包含了该库的一个实例,为用户提供了一个直观的学习和应用平台,无需担心如何开始使用。下面将详细...
HighSlide是一款功能强大的JavaScript图像和文字...总之,HighSlide是一个强大的工具,它为网页设计提供了丰富的图片和文本互动效果,通过灵活的配置和高度的定制性,可以帮助开发者创造出独特且引人入胜的用户体验。
总的来说,Highslide-4.1.9是一个功能完备且易用的JavaScript图片浏览解决方案。它不仅提供了丰富的图片展示效果,还考虑到了用户体验和性能优化。对于需要在网页中添加高质量图片浏览功能的开发者来说,Highslide...
这是一个很漂亮的图片弹出样式,类似缩放效果。个人认为比Lightbox JS要好。 Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of ...
总之,Highslide JS 4.1.13是一个强大而灵活的图片浏览解决方案,适用于需要提升用户体验的任何网页项目。通过理解和运用这些知识点,开发者可以轻松地在自己的网站上实现高质量的图片预览功能。
HighSlide 是一个流行的JavaScript图像和媒体展示库,它允许用户在网页上实现优雅的图片放大效果,同时提供了丰富的自定义选项和功能。这个压缩包文件包含的资源可能用于创建一个HighSlide图片展示示例,包括...
ja_highslide用于joomla
"Highslide JS 4.1.8" 是一个流行的JavaScript库,主要用于在网页上实现高效、用户友好的图片管理和展示功能。它提供了多种图片查看方式,使得网页中的图片浏览体验更加丰富和互动。这个库特别适合那些需要在网站上...
"Highslide Gallery"是一个流行的JavaScript图像展示库,用于在网页上创建高质量的、交互式的图片画廊。这个压缩包文件包含了一系列与Highslide Gallery相关的资源,让我们深入了解一下这个工具及其组成部分。 首先...