Implement a jQuery slideshow with a full background image, aiming to set up a clickable link on the final image of the

Could someone please help me with a query I have regarding a background image slide show using jQuery code? I have set up a slide show with multiple images and would like to make the last image clickable. Is it possible to achieve this specific functionality?

Here is the link to what I have done so far for reference:

The plugin I am using is BGSLIDER-INIT.JS

/*global $:false */
/*global window: false */

(function(){
  "use strict";

$(function ($) {

//BG SLIDESHOW WITH ZOOM EFFECT
$.mbBgndGallery.buildGallery({
            containment:"body",
            timer:1300,
            effTimer:1300,
            controls:false, //updated in v1.1
            grayScale:false,
            shuffle:false,
            preserveWidth:false,
            preserveTop: true,
            effect:"fade",

             images:[
             "images/bg/01.jpg",
             "images/bg/02.jpg",
            "images/bg/03.jpg",
            "images/bg/04.jpg",
            "images/bg/05.jpg",
            "images/bg/06.jpg",


             ],

            onStart:function(){},
            onPause:function(){},
            onPlay:function(opt){},
            onChange:function(opt,idx){},
            onNext:function(opt){},
            onPrev:function(opt){}
        });

});
})();

I am looking to make the last image (image06) clickable. Could someone guide me on how to modify the code to add this interactivity? I also want to link it to a section on my page and assign a scroll class to it.

javascriptjqueryhtmlcssimage

Answer №1

It appears that the slideshow is using a div class called "mbBgndGallery" to set a background. Although the slideshow isn't functioning properly for me at the moment, I suspect that this plugin is replacing the img src. Assuming that you are aware of which image is the last one in the slideshow, it seems to be "images/bg/06.jpg". Therefore, I would suggest writing something like this:

 if($('.mbBgndGallery img').attr('src') === 'images/bg/06.jpg') {
     $('.mbBgndGallery').on('click', function() {
         window.location = "someURL.com";
     });
 }

Keep in mind that this if statement will only be executed when the page loads. Ideally, this code should be integrated directly into the plugin itself. However, if you are unsure how to do so, setting an interval to check each time the image changes might be a solution. Since it appears that images are being changed every 1300 ms, set an interval for approximately the same amount of time with a slight offset.

 var i = setInterval(function() {
    if($('.mbBgndGallery img').attr('src') === 'images/bg/06.jpg') {
       $('.mbBgndGallery').on('click', function() {
           window.location = "someURL.com";
       });
    }
 }, 1350);

Answer №2

Utilize the .click() method in jQuery:

$('.mbBgndGallery').click(function() {
    $(this).find('img').each(function() {
        if( $(this).attr('src') == 'images/bg/06.jpg' )
            PERFORM CLICK ACTIONS
    });
});

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

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

Using CSS to create hover effects for specific classes of elements

Is there a way to make the button change color on hover when hovering over anywhere in the navigation bar (.topNav) instead of just when hovering over the individual button elements (.top, .middle, .bottom classes)? I tried using span to achieve this, but ...

htmlcssangular

Trouble arises when attempting to open a popup programmatically using jQueryMobile due to a JavaScript error

When attempting to open a jQuery Mobile popup programmatically, I encountered a JavaScript runtime error. The specific error message is: 0x800a138f - JavaScript runtime error: Unable to get property 'nodeName' of undefined or null reference I c ...

javascriptjqueryjquery-mobile

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

Issue with JQuery Ajax call within If condition

My Ajax call is working perfectly in one scenario, but not in another when placed inside an if statement. I'm relatively new to JS and Ajax, so I may be missing something fundamental. Any insights would be appreciated. Thank you. The function that wo ...

javascriptjquerypythonajax

multiple event listeners combined into a single function

I'm looking to streamline my button handling in JavaScript by creating just one function that can handle all the buttons on my page. Each button will trigger a different action, so I need a way to differentiate between them. I thought of using one eve ...

javascripttypescriptdom

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...

htmljquerycsscss-selectors

What is the best approach to retrieve all items from DynamoDB using NodeJS?

I am trying to retrieve all the data from a DynamoDB table using Node.js. Here is my current code: const READ = async (payload) => { const params = { TableName: payload.TableName, }; let scanResults = []; let items; do { items = await ...

javascriptnode.jsexpressamazon-dynamodbes6-promise

The HTML to PDF file converter API performs well in a local environment but encounters issues when deployed on node.Js, Express.Js, html-pdf, and Azure Web Services platform

I've developed an API that converts HTML to PDF, and it works flawlessly in my local environment but encounters issues when deployed on Azure app web services. During the process of generating the PDF, the request gets stuck and eventually times out, ...

javascriptnode.jsexpressazure-web-app-servicehtml-pdf

Is CefSharp compatible with JavaScript promises?

I noticed that when I run the JavaScript code below in the console of my browser, it works perfectly fine. However, when I try to use this code in CefSharp, it returns null. I am currently using CefSharp version 100.0.120-pre. Does CefSharp 100.0.120-pre s ...

javascriptc#promisecefsharp

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

cssflexbox

Updating a jQuery function to accommodate dynamic elements by employing either the .on() method or .delegate() method

I am looking to convert my jQuery function to .live so that it can be bound to elements added dynamically on the webpage. Here is the current jQuery code snippet: $(document).ready(function(){ $('form.ratedStars').each(functio ...

jquery

Select information from an array and store it within an object

I want to extract all objects from an array and combine them into a single object. Here is the current array data: userData = [ {"key":"firstName","checked":true}, {"key":"lastName","checked":true ...

javascriptangulartypescript

Challenges with rendering text in Three.js

We are currently working on a project in three.js and facing difficulties when it comes to loading fonts onto our text elements. Our approach involves using the TextGeometry object for rendering fonts and the typeface js converter to incorporate new fonts ...

javascriptthree.js

Align labels on top and inputs at the bottom using Bootstrap

I'm facing an issue with alignment in my form using Bootstrap 4.4. Whenever a select element is included, it disrupts the layout by breaking the alignment of labels and inputs on the same row. Is there a way to always keep the labels at the top and t ...

htmlcssbootstrap-4

Is it not possible to utilize async/await with MongoDB Model, despite it yielding a Promise?

Currently, I am facing an issue with a function in my code that is supposed to retrieve a user's inventory and then fetch the price property of each element using data from a Price Collection. Below is a snippet of the function (not the entire thing, ...

javascriptnode.jsmongodbmongoosemongodb-query

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

javascripthtmlsvgjquery-svglibrsvg

JQuery AJAX not retrieving data after $.post request

I am currently facing a challenge with a specific JQuery $.post request to a PHP-based processor. To troubleshoot, I set up a test page containing the following code: It's important to note that this is hosted on a subdomain, but there are no cross-d ...

javascriptphpjqueryajax

Using AngularJs to have two ui-views on a single page

As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...

javascripthtmlrubyangularjs

Is it possible to attach React Components to Elements without using JSX?

In my React Component, I have the following code: import React, { useEffect } from 'react' import styles from './_PhotoCollage.module.scss' import PhotoCard from '../PhotoCard' const PhotoCollage = ({ author }) => { let ...

javascriptreactjscomponents