I recently designed a unique image gallery.
Using next and previous buttons, I incorporated an animated up and down transition effect.
I am now looking to change the transition to be side by side when navigating through images using prev and next buttons.
Check out the demo of the gallery here:
Modified the script by replacing the top parameter with left.
To modify your javascript, simply update the SwapFirstLast() function:
Replace
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
$(this).css('z-index', newZindex) //set new z-index
.animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
inAnimation = false; //reset the flag
});
});
with
$(this).animate({ 'left' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
$(this).css('z-index', newZindex) //set new z-index
.animate({ 'left' : '0' }, 'slow', function() { //animate the image back to its original position
inAnimation = false; //reset the flag
});
});
Therefore, your function will now look like this:
function swapFirstLast(isFirst) {
if(inAnimation) return false; //return if already swapping pictures
else inAnimation = true; //set the flag indicating processing an image
var processZindex, direction, newZindex, inDeCrease; //variables for previous or next image
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action
$('#pictures img').each(function() { //process each image
if($(this).css('z-index') == processZindex) { //if it's the image to be processed
$(this).animate({ 'left' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
$(this).css('z-index', newZindex) //set new z-index
.animate({ 'left' : '0' }, 'slow', function() { //animate the image back to its original position
inAnimation = false; //reset the flag
});
});
} else { //not the image to process, only adjust z-index
$(this).animate({ 'top' : '0' }, 'slow', function() { //wait before swapping z-index when image is above/under the gallery
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCreate); //adjust the z-index by one
});
}
});
return false; //prevent following the clicked link
}
I hope this solution proves helpful.
Looking for a way to enhance the verification process of my signup form, I aim to ensure that all data entered is validated before being saved in the database. The validation process involves checking if the phone number consists only of numerical values a ...
Access to the <body> tag is restricted as it is in masterpage. To automatically trigger a postback when the page loads, you can use the following script: <script type="text/javascript"> window.onscroll= __doPostBack("<%= button.Clie ...
My goal is to dynamically load the HTML returned from a controller into a div when a user clicks on a row in a table. Check out my code snippet below: // Add event listener for opening and closing details jQuery('#exRowTable tbody').on ...
While working with Node.js on my Raspberry Pi, I encountered an issue where reading a local file 'test.html' resulted in hex output instead of the expected HTML format. Can someone explain why this might be happening? Additionally, I am aware tha ...
My React Native app is connected to a MongoDB database using Express and Node.js, with Axios handling client-server communication. The app frequently exchanges data with the database, sometimes up to 4 requests per second when in use. While everything wor ...
My system utilizes two JWT tokens: a Refresh Token (expires after 7 days) and an Access Token (expires after 15 minutes). These tokens are securely stored on httpOnly cookies and can be accessed via the server. The refresh method generates a new token and ...
Can you help me create a loop that will continuously run this script after it finishes executing, repeating the process indefinitely? I want to keep running this code over and over again. This script is using jQuery version 3.5.1 // Title var title1 ...
Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...
If I have two HTTP requests that I need to be called asynchronously, but both must be completed before rendering my view, how can I ensure that these two separate calls are done in order to trigger a specific function? Calls 3 and 4 can continue running in ...
Is there a way to customize the width of a photo in HTML? I am having trouble changing the size of a photo set on Tumblr to be larger. I have tried researching it, but I don't understand where to place maxwidth:600px or if this is even the correct app ...
I've been immersed in a 3D project where we showcase 3D objects in a web browser using the Three.js Library. One major issue has cropped up: Initially, the model appears small within a dom element or when the browser window is resized to a smaller s ...
While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...
I am struggling to get a button with dropdown working in Bootstrap4. Below is the HTML code: <div class="row" id="dropdown-box"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn" id="button-grou ...
Can Fullcalendar v2.6.0 work with jQuery-3.3.1 and MVC 5? I have an older project that needs to be updated. Currently, I am using Visual Studio 2017 with jQuery-3.3.1, MVC 5.2.4, and moment.min.js 2.24 for recompilation. However, I keep encountering an err ...
I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...
New to Jasmine testing, I'm exploring how to test a directive that handles mouse events such as mouse down, up, and move. My main query is regarding passing mouse coordinates from the Jasmine spec to my directive in order to simulate the mouse events ...
I was looking to create a textarea with HTML elements inside it and came across this informative article. My approach involved creating a div element with the attribute contenteditable="true". #call-text-form { height: calc(100vh - 350px); width: ...
My multiselect inline editable jqGrid with inlineNav is encountering some issues. The problem arises when following these steps: Click on the add button to display an empty record in the grid, add data, and save it. Select that record using the checkbox. ...
For my Rails app, I want a straightforward feature where a JavaScript function runs only if a radio button has been selected. The user should be presented with multiple radio buttons without any default selection. Upon clicking a "Run" button, the followin ...
I am encountering an issue with Laravel 5.3. When I attempt to load pages from the database and navigate to the next page, I receive an alert stating that the data cannot be loaded. Can someone assist me in resolving these errors? Please. BlogController.p ...