【Easy Setup】How to Full-Screen Vertical Slide Multiple Images Based on Mouse Cursor Position【jquery.galleryslider.js】

In the world of web development, providing engaging and interactive content to users is becoming increasingly important. In this article, we will introduce how to use the jquery.galleryslider.js plugin to vertically slide multiple images in full screen based on the position of the mouse cursor. This technique can be particularly useful for portfolio or gallery sites, providing a strong visual impact for users. We will explain it in detail from the basic steps, making it easy to implement, so feel free to give it a try.

What is jquery.galleryslider.js?

jquery.galleryslider.js is a plugin that uses the jQuery library to create an image slider. By utilizing this plugin, you can easily set up an image slider without complex JavaScript coding. It allows for full-screen display of images, sliding vertically according to the position of the user’s mouse cursor, providing intuitive navigation. The plugin is characterized by its simplicity, lightweight nature, and high customizability. It will be a powerful tool for creating galleries that capture user interest.

CSS Example for Full-Screen Vertical Sliding of Multiple Images Based on Mouse Cursor Position

First, write the CSS for the area where the images will be placed in the HTML. Here, we will set up the basic styles needed to display the images vertically and in full screen. CSS is essential for controlling the size and layout of the images. Below are the necessary styles.

<style type="text/css">
<!--
*{
	margin:0;
	padding:0;
}
body{
	background:#ffffff;
	height:100%;
	width:100%;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
}
#gallery{
	position:relative;
	margin:0 auto;
	cursor:n-resize;
}
#gallery img {
	width:100%;
	display:block;
}	
#gallery span{
	position:absolute;
	z-index:1;
	height:100%;
	width:100%;
	overflow:hidden;
	display:block;
	background:url(img/bg.png) repeat;
}
*html #gallery span {
	display:none;
} /*hide png ie6*/
-->
</style>

　
In the above CSS code, the element with the ID #gallery is centered, and the images are set to slide up and down when the mouse cursor moves. The *html #gallery span part also handles display control for compatibility with older browsers.

JavaScript Example for Full-Screen Vertical Sliding of Multiple Images Using jquery.galleryslider.js

Next, write the JavaScript to slide the images using jquery.galleryslider.js. By using the jQuery library, you can easily implement complex movements. Please refer to the following code.

Load the jquery.min.js and jquery.galleryslider.js files. Set options (such as width size and effects on multiple images) for the multiple image area using $(multiple image area).galleryslider({options}).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleryslider.js"></script>
<script type="text/javascript">  
$().ready(function() {  
$('#gallery').galleryslider({width:"100%", raster:true});  //width in px % or em | raster: true or false
});  
</script>

　
This script is executed when the page is loaded, applying the slider function to the element with the ID #gallery. The options are set to 100% width and raster effect enabled. This setting ensures that the images extend across the full screen and smoothly slide according to the user’s mouse movements.

HTML Example for Full-Screen Vertical Sliding of Multiple Images

The following HTML code is an example of the part where the images are actually displayed. It sets up 10 images to be displayed in full screen and vertically slide.

<h1>Displaying 10 images in full screen with vertical sliding.</h1>
<div id="gallery">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<img src="img/05.jpg" alt="" />
<img src="img/06.jpg" alt="" />
<img src="img/07.jpg" alt="" />
<img src="img/08.jpg" alt="" />
<img src="img/09.jpg" alt="" />
<img src="img/10.jpg" alt="" />
</div>

　
In this HTML structure, multiple img tags are placed within a div tag. Each image is vertically arranged when the page loads and slides according to the mouse cursor through jquery.galleryslider.js. Adjust the number of images and filenames as needed to suit your project.

jquery.galleryslider: Demo Page for Full-Screen Vertical Sliding of Multiple Images

Let’s experience this slider in action. Access the demo page from the link below to see how the images slide when you move the mouse cursor up and down.

jquery.galleryslider: Demo Page for Full-Screen Vertical Sliding of Multiple Images

Use this demo page as a reference and apply it to your own site. It is not only easy to implement but also enhances the user experience greatly.

Source: jQuery Gallery Slider Plugin | Kollermedia.at

You can find more information about the developer of this plugin here. For more detailed information and additional customization methods, please refer to the link below.

Source: jQuery Gallery Slider Plugin | Kollermedia.at

Conclusion

In this article, we introduced how to use jquery.galleryslider.js to vertically slide multiple images in full screen based on the mouse cursor position. This method is very effective in providing an interactive user experience and enhancing the appeal of visual content. While the implementation is simple, its impact is immense, so consider incorporating it into your website.

We hope this article helps you implement this technique. Apply this technology to various projects and unleash your creativity. Let’s continue to build more attractive websites by embracing new technologies and trends.

　
*Please use at your own risk.
Do not reuse the Google Analytics tags within the demo page.