在幻灯片显示中显示页面图像 [英] Display page images on slideshow

问题描述

嗨。

i在页面中有很多图像。我希望当用户点击图像时，打开弹出模式并以实际尺寸显示图像。例如本网站。



但我没有任何样品。

谢谢。



我尝试了什么：



首先我想要的做我自己。我搜索这个问题或问题，我发现这个例子

http://stackoverflow.com/questions/17786805/how-to-add-prev-and-next-button-in -a-simple-jquery-slideshow-code

但不是work.please你测试。

解决方案

首先，请看我的评论这个问题。



无论你如何设计幻灯片或任何其他类型的图像，它总是简化为与HTML元素相关的两件事< IMG> 。第一件事是可选的，取决于你的设计：你可以添加和删除一个HTML元素作为另一个元素的子元素。



第二件事是设置现有的图像URL < img> ，因此一个图像将显示在一个元素中，或者相同的元素可能会逐步显示不同的图像。



这是用jQuery完成的：

DOM插入，内部| jQuery API文档，

DOM删除| jQuery API文档，

.attr（）| jQuery API文档。



您可能还需要一些过渡效果，例如动画，淡入淡出，滑动等：影响| jQuery API文档。



将这些技术与一些动态布局更改结合起来（ CSS | jQuery API文档），你可以用图像设计任何类型的节目。

-SA

hi.
i have many images in page.i want when user click on the image ,open the popup modal and show image in real Size.For Example This Site .

But i dont have any sample.
Thanks.

What I have tried:

First i wanted to does myself .i search this problem or question and i found this example
http://stackoverflow.com/questions/17786805/how-to-add-prev-and-next-button-in-a-simple-jquery-slideshow-code
But not work.please you test.

解决方案

First of all, please see my comment to the question.

No matter how you design the slide show or any other kind of show with images, it is always reduced to two things related to the HTML element <img>. First thing is optional, depending on your design: you can add and remove an HTML element as a child of another element.

Second thing is setting the image URL for existing <img>, so one image will be shown in one element, or the same element may show different images step by step.

This is how it is done with jQuery:
DOM Insertion, Inside | jQuery API Documentation,
DOM Removal | jQuery API Documentation,
.attr() | jQuery API Documentation.

You may also need some transition effects, such as animation, fading, sliding and the like: Effects | jQuery API Documentation.

Combining these technique with some dynamic layout changes (CSS | jQuery API Documentation), you can design any kind of show with images.

—SA

这篇关于在幻灯片显示中显示页面图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！