js图片网格布局插件点击弹出大图展示特效



164 655 219



特效描述:图片网格布局 点击弹出大图 弹出展示特效,js 网格布局,图片插件,弹出大图,点击弹出,大图展示。

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/square-gallery.css">

2. 引入JS

<script type="text/javascript" src="js/square-gallery-min.js"></script>

3. HTML代码

<div id="squareGallery" class="galleryContainer">
	<img data-src="images/1.jpg" data-thumb="images/1.jpg" data-name="Caterpillar House" data-description="The home overlooks a dry landscape, its shape jutting out from the rocky hills with spectacular panoramic views over its surroundings." />
	<img data-src="images/2.jpg" data-thumb="images/2.jpg" data-name="Lakehouse Residence" data-description="It incorporates both passive and active environmental design features." />
	<img data-src="images/3.jpg" data-thumb="images/3.jpg" data-name="Balmoral House" data-description="The home is characterized by straight lines and large windows, an abundant supply of natural light filtering through." />
	<img data-src="images/4.jpg" data-thumb="images/4.jpg" data-name="Sagaponack" data-description="Spaces run the full width of the house with floor to ceiling sliding doors on both sides.  The spaces create apertures through which views, light, and air completely penetrate the house, dissolving its mass. " />
	<img data-src="images/5.jpg" data-thumb="images/5.jpg" data-name="Tigh Port na Long" data-description="It is a modern residence that was designed to take advantage of the area’s stunning, panoramic views." />
	<img data-src="images/6.jpg" data-thumb="images/6.jpg" data-name="Luxury W Retreat Koh Samui in Thailand" data-description="With beaches that seem to extend forever, the hotel is pure sophistication, providing its guests with luxurious spaces to enjoy at their leisure." />
	<img data-src="images/7.jpg" data-thumb="images/7.jpg" data-name="Blanco House" data-description="The interior is elegant and comfortable, with elements that exist in perfect harmony to create a pleasant atmosphere." />
	<img data-src="images/8.jpg" data-thumb="images/8.jpg" data-name="Nova Lima House" data-description="It is characterized in part by an extensive art collection that lines its walls as well as panoramic views of the surrounding landscape." />
	<img data-src="images/9.jpg" data-thumb="images/9.jpg" data-name="House Pedralbes" data-description="The project proposed to move the building to the rear of the site in order to achieve the best orientation towards the south and east, and to have a spacious garden" />
	<img data-src="images/10.jpg" data-thumb="images/10.jpg" data-name="JKC2 House" data-description="The dialogue between the components of this palette reflects a sense of warmth and immediacy with nature" />
	<img data-src="images/11.jpg" data-thumb="images/11.jpg" data-name="Smith-Clementi Residence" data-description="One gets the impression that this home somehow has a story to tell." />
	<img data-src="images/12.jpg" data-thumb="images/12.jpg" data-name="Architectural Masterpiece" data-description="It is elegant and comfortable, and makes use of a variety of decorative elements to create a harmonious whole" />
	<img data-src="images/13.jpg" data-thumb="images/13.jpg" data-name="Abitazione Privata Urgnano" data-description="The structure consists of imposing concrete walls perched atop more fragile glass walls, creating an interesting effect." />
	<img data-src="images/14.jpg" data-thumb="images/14.jpg" data-name="Rio Bonito House" data-description="It is a crudely elegant structure built to withstand the demands of its tropical environment while providing the owners with views of the nearby river." />
	<img data-src="images/15.jpg" data-thumb="images/15.jpg" data-name="Toronto Residence" data-description="Large portions of glazing along with clean lines and simple volumetric proportions underscore the client’s interest in creating a space with an effortless flow between interior and exterior" />
	<img data-src="images/16.jpg" data-thumb="images/16.jpg" data-name="New Forest House" data-description="Environmentally friendly technologies and sustainable materials were implemented in order to reduce the impact on the surroundings." />
	<img data-src="images/17.jpg" data-thumb="images/17.jpg" data-name="House in Rocafort" data-description="The home possesses futuristic elements, in contrast with the more traditional style of its architecture." />
	<img data-src="images/18.jpg" data-thumb="images/18.jpg" data-name="The Memory House" data-description="This contemporary home in Madrid, Spain, features an eye-catching spiral staircase sculpted of steel and wood." />
	<img data-src="images/19.jpg" data-thumb="images/19.jpg" data-name="Casa K" data-description="The spacious home makes great use of windows to let in natural light, and features a wall garden." />
	<img data-src="images/20.jpg" data-thumb="images/20.jpg" data-name="Fairhaven Beach House" data-description="The interior’s pervading element is wood, enhancing the fact that the emphasis of the home is to enjoy the surrounding outdoors." />
	<img data-src="images/21.jpg" data-thumb="images/21.jpg" data-name="California Contemporary" data-description="The home is stylish and chic, with a design that is fresh and clean." />
	<img data-src="images/22.jpg" data-thumb="images/22.jpg" data-name="Sensory Interior Delight" data-description="The terrace has stunning views over the city, is bright and spacious, with high ceilings and plenty of skylights." />
	<img data-src="images/23.jpg" data-thumb="images/23.jpg" data-name="Villa Plus" data-description="With a stunning lake view, the home possesses an understated rusticity which reflects the outdoors." />
	<img data-src="images/24.jpg" data-thumb="images/24.jpg" data-name="Casa Sulla Morella" data-description="It has been equipped with solar panels and oriented in such a way that the home can take maximum advantage of the natural heat and energy offered by the sun." />
	<img data-src="images/25.jpg" data-thumb="images/25.jpg" data-name="Wooden Cube House" data-description="It is a home brimming with subdued elegance, glass and wooden walls, and an impeccable landscape." />
	<img data-src="images/26.jpg" data-thumb="images/26.jpg" data-name="Villa V" data-description="Geothermal energy storage, a heat pump and solar collectors on the roof provide a high level of energy efficiency." />
	<img data-src="images/27.jpg" data-thumb="images/27.jpg" data-name="Areias do Seixo" data-description="Its interior is elegant and sophisticated, with a touch of rusticity and a lovely mixture of neutral and bright color palettes." />
	<img data-src="images/28.jpg" data-thumb="images/28.jpg" data-name="Casa V" data-description="The home makes use of the combination of glass, wood, and concrete to create elegance and sophistication." />
	<img data-src="images/29.jpg" data-thumb="images/29.jpg" data-name="L23 House" data-description="The home overlooks the ocean, and mixes modernity with rusticity by the use of stone, wood, and glass." />
	<img data-src="images/30.jpg" data-thumb="images/30.jpg" data-name="Hawthorn Residence" data-description="The home is clean and perfectly manicured throughout, with design that is sleek and smooth." />
	<img data-src="images/31.jpg" data-thumb="images/31.jpg" data-name="Villa Sifera" data-description="This home is distributed in a ground floor level in which even the hall and the dormitories are directly connected to a large external space with an exclusive infinite pool." />
	<img data-src="images/32.jpg" data-thumb="images/32.jpg" data-name="Wiesergut" data-description="Situated in a region that is known for skiing and other winter sports, the hotel provides the perfect respite to the cold outdoors." />
	<img data-src="images/33.jpg" data-thumb="images/33.jpg" data-name="Ice House " data-description="The interior is comfortable and elegant, and makes use of a variety of elements that come together impeccably." />
	<img data-src="images/34.jpg" data-thumb="images/34.jpg" data-name="H-House" data-description="This modern residence offers commanding views of the entire city and its surroundings." />
	<img data-src="images/35.jpg" data-thumb="images/35.jpg" data-name="C House" data-description="The architects have cultivated a dramatic duality between substance and perceived weightlessness of the forms and materials." />
	<img data-src="images/36.jpg" data-thumb="images/36.jpg" data-name="Stacked Cabin" data-description="This modern, family cabin was economically designed, making use of height to take advantage of its charming, woodsy surroundings." />
	<img data-src="images/37.jpg" data-thumb="images/37.jpg" data-name="Kettle Hole" data-description="Existing house that suffered from poor design and construction quality." />
	<img data-src="images/38.jpg" data-thumb="images/38.jpg" data-name="Under Pohutukawa Beach House" data-description="We separated the brief loosely into private and “public” components, giving us smaller individual masses with which to articulate the forms." />
	<img data-src="images/39.jpg" data-thumb="images/39.jpg" data-name="Crown House" data-description="Shaped like a crown, the home is characterized by the sharp lines that make up its exterior walls, their white color in stark contrast with the dark depths of the lake upon which it sits." />
	<img data-src="images/40.jpg" data-thumb="images/40.jpg" data-name="Torquay House" data-description="The residence was designed to be “robust” and withstand the conditions of the coastal location." />
	<img data-src="images/41.jpg" data-thumb="images/41.jpg" data-name="House 6" data-description="This three-story contemporary home is located in São Paulo, Brazil." />
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 弹出层拖动 背景切换 窗口提示框 手风琴 图表 图片 头像截图 lightbox 图片网格

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到