Transition effects in the gallery are only triggered once all images have been seen

*Update 2

After identifying that the images were not fading in/out due to being considered unloaded, I resolved the issue by incorporating the initial 3 lines of jQuery code. I anticipate refactoring this and will provide an update once completed.

JSFiddle Link

HTML Code Snippet:

<div class="gallery">
    <div class='thisImg activeImg'><img src='img/hair/hair-colour-5.jpg' /></div>

      <div class='thisImg'><img src='img/hair/hair-colour-1.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-2.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-3.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-4.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-6.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-7.jpg' /></div>
      <div class='thisImg'><img src='img/hair/hair-colour-8.jpg' /></div>

      <div class='nextImg'><p><a>&gt;</a></p></div>
      <div class='prevImg'><p><a>&lt;</a></p></div>

</div> 

CSS Styles:

.gallery {
    position:absolute;
    top:2px;
    right:0;
    float:right;
    height:400px;
    width:400px;
    border:3px solid #CFC;
}

.thisImg {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    display:hidden;
}

.activeImg {
    display:block;
    z-index:2;
}

.prevImg, .nextImg {
    position:absolute;
    background-color:#CFC;
    box-shadow: inset 0 0 10px #9C0;
    -moz-box-shadow: inset 0 0 10px #9CO;
    -webkit-box-shadow: inset 0 0 10px #9CO;
    text-align:center;
    top:175px;
    height:50px;
    width:50px;
    font-size:42px;
    z-index:2;
    opacity:0.5;
}

.prevImg {
    left:10px;
}

.nextImg {
    right:10px;
}

.nextImg p, .prevImg p {
    position:absolute;
    left:15px;
    top:-5px;
    color:#630;
}

.nextImg:hover, .prevImg:hover {
    opacity:1;
    color:#630;
    display:block;
    cursor:pointer;
}

jQuery Implementation:

$(document).ready(function() {
    $(".thisImg").hide();
    $(".activeImg").show();
    $("#thisImg").bind("load", function () { $(this).fadeIn(); });
});


var main = function() {

    $('.nextImg').click(function() {
        var currentImg = $('.activeImg');
        var nextImg = currentImg.next(".thisImg");
        if(nextImg.length == 0) {
            nextImg = $('.thisImg').first();
        }   

        currentImg.fadeOut(3000).removeClass('activeImg');
        nextImg.fadeIn(3000).addClass('activeImg');
    });

    $('.prevImg').click(function() {
        var currentImg = $('.activeImg');
        var prevImg = currentImg.prev(".thisImg");
        if(prevImg.length == 0) {
            prevImg = $('.thisImg').last();
        }   

        currentImg.fadeOut(3000).removeClass('activeImg');
        prevImg.fadeIn(3000).addClass('activeImg');
    });
}

$(document).ready(main);

Answer №1

http://jsfiddle.net/73geyvwd/1/ - functional demo link

A couple of key points to consider.

1.) Make sure to define a default "activeImg" element.

<div class="thisImg activeImg">

2.) When using the .prev() and .next() methods, incorporate the .thisImg class selector to target specific elements within the same level.

var nextImg = currentImg.next(".thisImg");
var prevImg = currentImg.prev(".thisImg");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating ZeroClipboard or ZClip (button for copying to clipboard) using JQuery's Ajax functionality

Seeking to implement a 'copy to clipboard' feature triggered by clicking. However, I am facing a challenge as this functionality needs to be integrated with other content loaded using Ajax. Many plugins that achieve the same use Flash to bypass ...

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 ...

Learn the steps to create a vertically tiled background using a clipped image

My goal is to create a vertically tiled background by clipping the top 50px of a background image and using only that portion. However, the code I have below isn't working as expected. Even though I've given a higher z-index to the <div class= ...

Learn how to display JSON data sent from the server on a webpage

I'm just starting out with jquery. I have an api called '/categories' that gives me a json object of categories. The response looks like this: [ { name: "Laptop deals", slug: "laptop-deals", imageURL: "image.jpg", id: 1 }, { name: "Fashion ...

Issue with background image not covering entire div

I am experiencing an issue where the background image of a div element is not occupying the full image. I want to display images side by side with text underneath them. Below is the CSS code: .img-w { position: relative; background-size: cover; ba ...

Using regular expressions to swap out content within HTML tags

I am attempting to encrypt the text content within an HTML Document while keeping its layout intact. The text content is enclosed in pairs of tags, such as: < span style...>text_to_get< /span>. I aim to utilize Regex to extract (1) and then rep ...

Why should one bother with specifying types when defining a variable in Typescript?

As someone new to Typescript, I've come to appreciate its many advantages when working on larger applications and with multiple team members :) Imagine you have the following TypeScript code: declare const num = 5: number; Why is this better than: ...

Expanding the axes using Google Charts

Seeking to Expand Y-Axis I am attempting to stretch the Y-axis so that it counts up to 300 instead of just 100. The issue arises when I adjust the Y-axis to reach 300, as the values remain in the same position as they did when counting to 100. Fo ...

Extract the entire div including all its elements and then transmit it using the PHP mail function

Currently, I am developing a feature that allows users to send an email. The email should include only one div from the page which contains elements added using the jQuery drag and clone function. I am unsure how to copy the entire div along with its child ...

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

Executing the command "node <app name>" does not result in any action

I am experiencing an issue with my bot app called "vgen.js". When I run the command "node vgen", the prompt/directory disappears and the cursor just blinks on the far left of the screen. I have been following instructions from a tutorial found here: https ...

Animation controlled by a button

I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...

Changing the position of elements based on screen resolution for Desktop and Mobile

I'm working on a page with a sidebar that contains elements on desktop. When viewed on mobile, the sidebar moves under the main page. However, I would like those elements to be displayed above the main page on mobile, similar to this: Any suggestions ...

Display email address in a concise manner

Managing user information in my project involves capturing both username and email address. While the username is optional, the email address is mandatory with a maximum length of 100 characters. My issue arises when the email address exceeds 60 character ...

React dynamic table

I've been experimenting with creating a dynamic table in React that allows users to add and delete rows. I need the data entered by the user to be saved, possibly using in-state management so that I can work with it later. Essentially, I'm looki ...

Issue on WordPress where JQuery is undefined causing continuous refreshing on IPhone devices

My wordpress website is performing well in most browsers, including some mobile ones. However, when accessed on an IPhone, the homepage keeps refreshing in a continuous loop. Even after emulating an IPhone using Chrome developer tools, the issue persists. ...

"Activate the mat-checkbox based on the outcome of a certain process

I'm working with a mat-checkbox that triggers a mat-dialog when clicked. If the user clicks "confirm" in the dialog, I want the checkbox to be checked. If they click "cancel", I want it to remain unchecked. How can I achieve this? Below is the method ...

Eliminate the approximately 20 pixel space on the right side of the HTML email when viewed on iOS

Recently, I've been focused on developing a contact form for my portfolio website. Successfully sending HTML emails from the server to my email address has been a highlight. Since I mainly access my emails on my iPod Touch, I tailored the mail templat ...

Determining the optimal times to utilize traditional loops instead of array helpers

After writing in Javascript for some time, I've become quite comfortable with using array helpers. However, there have been moments where traditional for loops seem more practical and easier to work with compared to array helpers. Can you provide me w ...

Getting the value of a sibling select element when a button is clicked

Trying to retrieve the selected option value on button click has become a challenge due to multiple groups of buttons and select elements. The key seems to be using siblings somehow, but the exact method remains elusive... <div class="form-group" ng-re ...