08/12/2010
1
Free photo gallery is one of the interesting features in the world of web.
This free HTML JavaScript tutorial don't guide you create a flash sliding gallery, but sliding image gallery; by using jQuery scrollable UI library.
Please go to the detailed post to get full instructions and JavaScript example codes for a beautiful web photo gallery on your website.
- Demo
- Enlarge
- Reload
- New window
Generate your business videos by AI with voice or just text
Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers.
Scrollable image slider is one of the interesting features in the image gallery application. This allows us to display thumbnails in the form of slides that can be scrolled automatically or manually using the control buttons.
Figure below shows a scrollable image slider featuring four thumbnails per slide. To display thumbnails from another slide, simply by clicking the navigation buttons located on the right and left slide. Slides can also be scrolled automatically by using the left and right arrow keyboard or using the mouse wheel.
Scrollable image slider
In this tutorial, i'll use Scrollable component from jQuery Tools user interface (UI) library which is based on popular jQuery javascript framework. Current version of jQuery Tools at the time of this writing is version 1.1.2, which can be downloaded here. The library itself consists of six user interface components that can be easily combined: Tabs, Tooltip, Overlay, Scrollable, Expose, and Flashembed.
How to Setup
- Download Scrollable component from download page and save it as jquery.tools.min.js. You can download it with jQuery (v1.3.2) as a single file (21.75 kb) or as a separated file (3.37 kb) if you already have jQuery.
- Include the jquery.tools.min.js in the HEAD section of your HTML file
1 | <script src="scripts/jquery.tools.min.js" type="text/javascript"></script> |
or
1 | <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> |
2 | <script src="scripts/jquery.tools.min.js" type="text/javascript"></script> |
Using Scrollable UI library
HTML Code
01 | <a class="prevPage left"></a> |
02 | <div class="scrollable"> |
03 | <div class="items"> |
04 | <!-- 1-4 --> |
05 | <img src="http://londatiga.net/tutorials/scrollable/images/img1.jpg" /> |
06 | <img src="http://londatiga.net/tutorials/scrollable/images/img2.jpg" /> |
07 | <img src="http://londatiga.net/tutorials/scrollable/images/img3.jpg" /> |
08 | <img src="http://londatiga.net/tutorials/scrollable/images/img4.jpg" /> |
09 |
10 | <!-- 5-8 --> |
11 | <img src="http://londatiga.net/tutorials/scrollable/images/img5.jpg" /> |
12 | <img src="http://londatiga.net/tutorials/scrollable/images/img6.jpg" /> |
13 | <img src="http://londatiga.net/tutorials/scrollable/images/img7.jpg" /> |
14 | <img src="http://londatiga.net/tutorials/scrollable/images/img8.jpg" /> |
15 |
16 | <!-- 10-12 --> |
17 | <img src="http://londatiga.net/tutorials/scrollable/images/img9.jpg" /> |
18 | <img src="http://londatiga.net/tutorials/scrollable/images/img10.jpg" /> |
19 | <img src="http://londatiga.net/tutorials/scrollable/images/img11.jpg" /> |
20 | <img src="http://londatiga.net/tutorials/scrollable/images/img12.jpg" /> |
21 | </div> |
22 | </div> |
23 |
24 | <a class="nextPage right"></a> |
line 01: element for left/prev button.
line 02: root element (div) for the scrollable.
line 03: wrapper element.
line 04-20: scrollable images (will be displayed four images per slide).
line 24: element for right/next button.
CSS Code
Scrollable
01 | .scrollable { |
02 | background: #ccc; |
03 | position: relative; |
04 | overflow: hidden; |
05 | width: 690px; |
06 | height:145px; |
07 | border:1px solid #ccc; |
08 | -moz-border-radius:4px; |
09 | -webkit-border-radius:4px; |
10 | } |
11 |
12 | .scrollable .items { |
13 | width: 20000em; |
14 | position: absolute; |
15 | clear: both; |
16 | } |
17 |
18 | .scrollable img { |
19 | opacity: 0.6; |
20 | float:left; |
21 | margin:15px 5px 15px 15px; |
22 | background-color:#fff; |
23 | cursor:pointer; |
24 | width:150px; |
25 | height:113px; |
26 | -moz-border-radius:4px; |
27 | -webkit-border-radius:4px; |
28 | } |
29 |
30 | .scrollable .active { |
31 | opacity:1; |
32 | border:2px solid #000; |
33 | z-index:9999; |
34 | position:relative; |
35 | } |
line 01, style for container element, the length and width depends on image size and how many images you want displayed per slide.
line 12, style for wrapper element.
line 18, style for images in a slide.
line 30, style for selected image.
Navigation button (prev & next)
01 | .scrollable { float:left; } |
02 |
03 | a.left, a.right { |
04 | display: block; |
05 | width: 18px; |
06 | height: 18px; |
07 | float: left; |
08 | margin: 60px 10px; |
09 | cursor: pointer; |
10 | } |
11 |
12 | a.right { background: url(scrollable/arrow/right.png) no-repeat; clear:right; margin-right: 0px;} |
13 | a.right:hover { background-position:0px -18px; } |
14 | a.right:active { background-position:0px 0px; } |
15 |
16 | a.left { background: url(scrollable/arrow/left.png) no-repeat; margin-left: 0px; } |
17 | a.left:hover { background-position:0px -18px; } |
18 | a.left:active { background-position:-0px 0px; } |
19 |
20 | a.disabled { visibility:hidden !important; } |
line 01, allow next and prev buttons placed on each side of the slide.
line 12, set size and position of prev and next buttons.
line 16, set background image for prev and next buttons.
Javascript Code
1 | <script> |
2 | $(function() { $("div.scrollable").scrollable({size: 4}); }); |
3 | </script> |
$("div.scrollable") is a jQuery selector for scrollabe container. On example above, we set four images for each slide using configuration parameter 'size'. Default value of 'size' parameter is 5. You can learn more about the API of the Scrollable component on this page.
View Live Demo | Download Example Source Code
by Preview- Sent (0)
- New
Generate your business videos by AI with voice or just text
chatGPTaz.com
Talk to ChatGPT by your mother language
AppAIVideo
Your first FREE AI Video App
Deepfake Video
Deepfake AI Video Maker
Deepfake
Deepfake AI Video Maker
AI Deep Fake
Deepfake AI Video Maker
AIvidio
AI Video Mobile Solutions
AIvideos
AI Video Platform & Solutions
AIvedio
AI Video App Maker
Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)
Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)
Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE
Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE
Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE
Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app
Your next top AI Assistant
Claude AI, developed by Anthropic
Your next top AI Assistant
Claude AI, developed by Anthropic
Temu Free $500 for New Users
Claim Free Temu $500 Credit via Affiliate & Influencer Program
Free TikTok Ads Credit
Master TikTok Ads for Your Business Marketing
Dall-E-OpenAI.com
Generate creative images automatically with AI
chatGPT4.win
Talk to ChatGPT by your mother language
First AI Product from Elon Musk - Grok/UN.com
Speak to Grok AI Chatbot with Your Language
Tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
iPhoneKer.com
Save up to 630$ when buy new iPhone 16
Buy Tesla Optimus Robot
Order Your Tesla Bot: Optimus Gen 2 Robot Today for less than $20k
Cool Domains for Sale!
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:
Lorenz [more]
32,912
1
0
0
0.08 KBytes
0 votes / 32,912 previews / 1 comment
08/12/2010
Free photo gallery is one of the interesting features in the world of web.
This...Create Sliding Photo Gallery using jQuery - Create Sliding Photo Gallery using jQuery - Language: English
