Navigate between pictures using hover in jQuery

Question

Navigate between pictures using hover in jQuery

I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them to cycle automatically.

$("#one").on({
mouseover: function () {
    timer = setTimeout(function () {
        $("#first").removeClass('hidden').css('opacity', '1');
    }, 300);
},
mouseout: function () {
    clearTimeout(timer);
    $("#first").css({
        'opacity': '0'
    }).addClass('hidden');
}
});

https://jsfiddle.net/enwed7b9/1/

javascript jquery css

Answer 1

Answer №1

You may have encountered some broken image links in your HTML code, but fear not! This solution should resolve the issue: https://jsfiddle.net/pengyanb/st47yxqb/6/

var imageIndex = 0;
var periodicTimer;
setPeriodicTimer();

function setPeriodicTimer()
{
    periodicTimer = setTimeout(function(){
        $('img').addClass('hidden').css('opacity', '0');
        console.log('imageIndex: '+imageIndex);
switch(imageIndex)
        {
            case 0:
                $('#first').removeClass('hidden').css('opacity', '1');
                break;
           case 1:
                $('#second').removeClass('hidden').css('opacity', '1');
                break;
           case 2:
                $('#third').removeClass('hidden').css('opacity', '1');
                break;       
           case 3:
                $('#fourth').removeClass('hidden').css('opacity', '1');
                break;
   
           case 4:
                $('#fifth').removeClass('hidden').css('opacity', '1');
                break;
           case 5:
                $('#sixth').removeClass('hidden').css('opacity', '1');
                break;
           case 6:
                $('#seventh').removeClass('hidden').css('opacity', '1');
                break;
        }
        imageIndex++;
        if(imageIndex > 6)
            imageIndex = 0;
        setPeriodicTimer();
}, 2000);
}

$("#one").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 0;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
<!-- The rest of the JavaScript code is similar to the above snippet -->

.box {
    position: relative;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
    margin-bottom: 4px;
    margin-right: 3px;
    padding-bottom: 7px
}

.image {
    width: 100%;
    z-index: -1
}
.image img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 10%;
    bottom: 0;
    right: 0;
    width: 55%;
    transition: ease-out .4s;
    z-index: -1
}
.hidden {
   
    opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="project-link-2">
    <!-- Your HTML content with project links and images here -->
    
    </ul>
        
        
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Rest of the image elements -->

Answer 2

You may have encountered some broken image links in your HTML code, but fear not! This solution should resolve the issue: https://jsfiddle.net/pengyanb/st47yxqb/6/

var imageIndex = 0;
var periodicTimer;
setPeriodicTimer();

function setPeriodicTimer()
{
    periodicTimer = setTimeout(function(){
        $('img').addClass('hidden').css('opacity', '0');
        console.log('imageIndex: '+imageIndex);
switch(imageIndex)
        {
            case 0:
                $('#first').removeClass('hidden').css('opacity', '1');
                break;
           case 1:
                $('#second').removeClass('hidden').css('opacity', '1');
                break;
           case 2:
                $('#third').removeClass('hidden').css('opacity', '1');
                break;       
           case 3:
                $('#fourth').removeClass('hidden').css('opacity', '1');
                break;
   
           case 4:
                $('#fifth').removeClass('hidden').css('opacity', '1');
                break;
           case 5:
                $('#sixth').removeClass('hidden').css('opacity', '1');
                break;
           case 6:
                $('#seventh').removeClass('hidden').css('opacity', '1');
                break;
        }
        imageIndex++;
        if(imageIndex > 6)
            imageIndex = 0;
        setPeriodicTimer();
}, 2000);
}

$("#one").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 0;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
<!-- The rest of the JavaScript code is similar to the above snippet -->

.box {
    position: relative;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
    margin-bottom: 4px;
    margin-right: 3px;
    padding-bottom: 7px
}

.image {
    width: 100%;
    z-index: -1
}
.image img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 10%;
    bottom: 0;
    right: 0;
    width: 55%;
    transition: ease-out .4s;
    z-index: -1
}
.hidden {
   
    opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="project-link-2">
    <!-- Your HTML content with project links and images here -->
    
    </ul>
        
        
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Rest of the image elements -->

Answer 3

Answer №2

This code snippet enables cycling through images every 3 seconds, pausing the cycle and displaying the hovered image when the user hovers over a link.

var autoCycle = true;
var i = 1;
var images = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fifth'),
    $('#sixth'),
    $('#seventh')
];

images[0].removeClass('hidden').css('opacity', '1');

setInterval(function() {
    if(autoCycle) {
        images.forEach(function(img) {
            img.css({ 'opacity': '0' }).addClass('hidden');
        });

        var currImage = images[(i - 1) % images.length];
        var newImage = images[i % images.length];

        currImage.css({ 'opacity': '0' }).addClass('hidden');
        newImage.removeClass('hidden').css('opacity', '1');

        i++;
    }
}, 200);

To control the auto-cycling behavior based on user hover actions, update the calls to on() as follows:

$("#one").on({
    mouseover: function () {
        autoCycle = false;
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        autoCycle = true;
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});

Answer 4

This code snippet enables cycling through images every 3 seconds, pausing the cycle and displaying the hovered image when the user hovers over a link.

var autoCycle = true;
var i = 1;
var images = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fifth'),
    $('#sixth'),
    $('#seventh')
];

images[0].removeClass('hidden').css('opacity', '1');

setInterval(function() {
    if(autoCycle) {
        images.forEach(function(img) {
            img.css({ 'opacity': '0' }).addClass('hidden');
        });

        var currImage = images[(i - 1) % images.length];
        var newImage = images[i % images.length];

        currImage.css({ 'opacity': '0' }).addClass('hidden');
        newImage.removeClass('hidden').css('opacity', '1');

        i++;
    }
}, 200);

To control the auto-cycling behavior based on user hover actions, update the calls to on() as follows:

$("#one").on({
    mouseover: function () {
        autoCycle = false;
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        autoCycle = true;
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});

Answer 5

Answer №3

This content should aim for maximum generality,

Efforts should be made to minimize redundant code. A universal functionality can be established with the incorporation of image links in the subsequent manner:

HTML: (unique data-id attributes used as image links)

<ul class="project-link-2">
    <li class="box" data-id="first"> <a class="project-link" href="#modal1"><span>Modurra Shelving</span>   </a>    
    </li>
    <br>
    <li class="box" data-id="second"> <a class="project-link" href="#modal2"><span>Kami Bicycle Helmet</span> </a>  
    </li>
    <br>
    <li class="box" data-id="third"> <a class="project-link" href="#modal3"><span>Revamping Language Learning</span> </a>   
    </li>
    <br>
    <li class="box" data-id="fourth"> <a class="project-link" href="#modal4"><span>Sports Innovation Challenge</span> </a>  
    </li>
    <br>
    <li class="box" data-id="fifth"> <a class="project-link" href="#modal5"><span>Lights Out</span></a> 
    </li>
    <br>
    <li class="box" data-id="sixth"> <a class="project-link" href="#modal6"><span>Maru Personal Speaker Design</span> </a>  
    </li>
    <br>
    <li class="box" data-id="seventh"> <a class="project-link" href="#modal7"><span>A Few Casual Projects</span> </a>   
    </li>
</ul>

<!-- Images -->
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Lights Out -->
<div class="image">
    <img alt="" class="hidden" id="second" src="http://tctechcrunch2011.files...">

JS: (condensed and optimized code)

var position = 0 / 1; // Ensure integer value
var myImgArr = $(".image img");
var count = myImgArr.length;
var timer;

$(function () {
    $(myImgArr[0]).removeClass('hidden'); // Show first image on page load
    timer = setInterval(setMySlider, 2000); // Initiate slider function
});

$(".project-link-2 li").mouseenter(function () {
    clearInterval(timer);
    myImgArr.addClass('hidden');
    myID = '#' + $(this).attr('data-id');
    $(myID).removeClass('hidden');
}).mouseleave(function () {
    myID = '#' + $(this).attr('data-id');
    $(myID).addClass('hidden');
    $(myImgArr[mod]).removeClass('hidden');
    timer = setInterval(setMySlider, 2000);
});

function setMySlider() {
    mod = ((position % count) / 1);
    $(myImgArr[mod]).addClass('hidden');
    position++;
    mod = ((position % count) / 1)
    $(myImgArr[mod]).removeClass('hidden');
}

Access Fiddle here

Answer 6

This content should aim for maximum generality,

Efforts should be made to minimize redundant code. A universal functionality can be established with the incorporation of image links in the subsequent manner:

HTML: (unique data-id attributes used as image links)

<ul class="project-link-2">
    <li class="box" data-id="first"> <a class="project-link" href="#modal1"><span>Modurra Shelving</span>   </a>    
    </li>
    <br>
    <li class="box" data-id="second"> <a class="project-link" href="#modal2"><span>Kami Bicycle Helmet</span> </a>  
    </li>
    <br>
    <li class="box" data-id="third"> <a class="project-link" href="#modal3"><span>Revamping Language Learning</span> </a>   
    </li>
    <br>
    <li class="box" data-id="fourth"> <a class="project-link" href="#modal4"><span>Sports Innovation Challenge</span> </a>  
    </li>
    <br>
    <li class="box" data-id="fifth"> <a class="project-link" href="#modal5"><span>Lights Out</span></a> 
    </li>
    <br>
    <li class="box" data-id="sixth"> <a class="project-link" href="#modal6"><span>Maru Personal Speaker Design</span> </a>  
    </li>
    <br>
    <li class="box" data-id="seventh"> <a class="project-link" href="#modal7"><span>A Few Casual Projects</span> </a>   
    </li>
</ul>

<!-- Images -->
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Lights Out -->
<div class="image">
    <img alt="" class="hidden" id="second" src="http://tctechcrunch2011.files...">

JS: (condensed and optimized code)

var position = 0 / 1; // Ensure integer value
var myImgArr = $(".image img");
var count = myImgArr.length;
var timer;

$(function () {
    $(myImgArr[0]).removeClass('hidden'); // Show first image on page load
    timer = setInterval(setMySlider, 2000); // Initiate slider function
});

$(".project-link-2 li").mouseenter(function () {
    clearInterval(timer);
    myImgArr.addClass('hidden');
    myID = '#' + $(this).attr('data-id');
    $(myID).removeClass('hidden');
}).mouseleave(function () {
    myID = '#' + $(this).attr('data-id');
    $(myID).addClass('hidden');
    $(myImgArr[mod]).removeClass('hidden');
    timer = setInterval(setMySlider, 2000);
});

function setMySlider() {
    mod = ((position % count) / 1);
    $(myImgArr[mod]).addClass('hidden');
    position++;
    mod = ((position % count) / 1)
    $(myImgArr[mod]).removeClass('hidden');
}

Access Fiddle here

Navigate between pictures using hover in jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Bootswatch is causing the Bootstrap tooltip feature to malfunction

What's the best way to ensure uniform spacing between the list items in this slider?

Retrieving data and selecting tables using jQuery

Discover the method to calculate the combined file size of multiple uploads with jquery

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

Send information from a web page's elements to PHP with the help of AJAX

Can you explain the functionality of isolate scope in angularjs?

The ReactJS Material Table Tree mode experiences delays when new row data is introduced

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

Would like to conceal an element only if it is currently visible

Learn the process of transforming a filter into a directive in AngularJS

Utilize AngularJS to integrate a service into the router functionality

Using JavaScript code to sift through and eliminate irrelevant data

Genvalidator: Validate forms by checking for checkbox selection

What is the best way to determine if a radio button has been chosen, and proceed to the next radio button to display varied information?

What causes TypeScript generics to infer varying types when an array member is enveloped?

Having trouble installing @angular/cli 4 on Debian?

Achieving a sleek line effect with a gradient border

Variations in jQuery's append method when dealing with a string, a reference to a jQuery object