jQuery – Bubbleriffic Image Gallery

File Size:2931.62 KB
Views Total:265
Last Update:December 31, 2017
Publish Date:December 31, 2017
Official Website:Go to website
License:MIT

A bubbly image is created in this kind of tutorial and this helps to show the images in a unique way in the image gallery. The main idea behind this is to create the thumbnails of all the albums in the rounded fashion allowing the user to scroll the mouse automatically by moving the mouse. By clicking the image, the image will get zoom in a big circle and the image will automatically be resized and fit into the screen. It makes the images appear in a new way than the old ways.

How to use :

1. Add First, we will include the following scripts :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>

2. Let’s start by creating our HTML structure :

<div class="top_menu" id="top_menu">
	<span id="description" class="description"></span>
	<a id="back" href="#" class="back"><span></span>back</a>
	<div class="info">
		<span class="album_info">Album 1</span>
		<span class="image_info"> / Shot 1</span>
	</div>
</div>

3. We also need a loader element :

<div id="loader" class="loader"></div>

4. we will put our main h1 element for the gallery title :

<div class="header" id="header" style="top:-90px;"><!--top 30 px to show-->
	<h1>Bubbleriffic<span>jQuery Image Gallery</span></h1>
</div>

5. Add  thumbnails wrapper that will have all the thumbnail albums :

<div id="thumbnails_wrapper" class="thumbnails_wrapper" style="top:-255px;">
	<!-- top:110px to show-->
	
	<div id="tshf_container1"  class="tshf_container">
		<div class="thumbScroller">
			<div class="container">
			
				<div class="content">
					<div>
						<a href="#">
							<img src="images/albums/album1/thumbs/1.jpg" alt="Description" class="thumb" />		
						</a>
						<span></span>
					</div>
				</div>
				
				<div class="content">
					...
				</div>
				
			</div>
		</div>
	</div>
	
	<div id="tshf_container2"  class="tshf_container">
		...
	</div>

	<div id="tshf_container3"  class="tshf_container">
		...
	</div>
</div>

6. Add the yellow bubble that will be used to create the bubble like tunnel effect :

<div class="bubble">
	<img id="bubble" src="images/bubble.png" alt=""/>
</div>

7.The preview container for the full image view with the navigation :

<div id="preview" class="preview">
	<a id="prev_image" href="#" class="prev_image"></a>
	<a id="next_image" href="#" class="next_image"></a>
</div>

8. We will start by caching some important elements :

var $thumbnails_wrapper 	= $('#thumbnails_wrapper'),
	$thumbs					= $thumbnails_wrapper.find('.tshf_container').find('.content'),
	$top_menu				= $('#top_menu'),
	$header					= $('#header'),
	$bubble                 = $('#bubble'),
	$loader					= $('#loader'),
	$preview				= $('#preview'),
	$thumb_images			= $thumbnails_wrapper.find('img'),
	total_thumbs			= $thumb_images.length,
	$next_img				= $('#next_image'),
	$prev_img				= $('#prev_image'),
	$back					= $('#back'),
	$description			= $('#description'),
	//current album and current photo
	//(indexes of the tshf_container and content elements)					
	currentAlbum			= -1,
	currentPhoto			= -1;

Done 🙂