Creating an Image Link within Nivo Slider

I have been trying to figure out how to make an image a link in NivoSlider. I know that I can use captions to create a link, but I want the actual image to be clickable for better accessibility.

I found a similar question on StackOverflow, but it was related to an old version of Nivo.

Here is how I am setting up the slider:

<div class="slider-wrapper theme-default container">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <div class='slide'><a href='#'><img src='abc.png'></a>
        </div>
        <div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
        </div>
    </div>
</div>

Everything seems to work fine with the slideshow, transitions, and captions. However, I'm struggling to get the anchor link to work on the entire image. If anyone has a solution, please share!

EDIT: Here is the CSS code snippet that I have added:

.slider-wrapper {
    margin: auto;
    margin-top: 15px;
    background: fade(white,80%);
    padding-top: 15px;
    margin-bottom: 40px;
}
.slide-title {
    .font;
    color: #ddd;
}
javascriptjqueryhtmlcssnivo-slider

Answer №1

I missed the party by a long shot, but maybe this will come in handy for someone else

HTML

<div class="slider-wrapper theme-default">
              <div id="slider" class="nivoSlider">
                <a href="http://www.google.ae/" target="_new"><img  title="#htmlcaption1"  src="images/01.png" alt=""></a>
                <a href="http://www.yahoo.ae/" target="_new"><img title="#htmlcaption2"  src="images/02.png" alt=""></a>                 
              </div>
          </div>

CSS

.nivoSlider a.nivo-imageLink {
background:white; 
filter: alpha(opacity=0); 
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;

}

Answer №2

Here's what solved the issue for me:

I decided to delete the image title attribute with the value of "#caption"

And just like that, problem solved!

Answer №3

If you want the slider to function properly, simply remove the wrapper divs with the class "slide". An example of this can be found in the Nivo Slider demo.

<a href="#1"><img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /></a>
                <a href="#2"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <a href="#3"><img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>
                <a href="#4"><img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /></a>

For more information, please visit this discussion thread:

NIVO SLIDER - Make a slide a link?

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

Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions

When working with HTML and bootstrap (3.7) CSS, I often come across this issue: <div class="row"> <div class="col-xs-6">Stretch ME!</div> <div class="col-xs-6">Conditional</div> </div> Sometimes the "Conditional" d ...

csstwitter-bootstrapflexbox

Retrieving precise passed arguments in the $(document).ready function

I am working on a gridview where I need the rows to expand and display the BatchID that is passed. Currently, I am using href="javascript:switchViews('div<%# Eval("BatchID")%>', 'one');" to pass this information, but I'm stru ...

javascriptjqueryhtml

Having trouble with ng-click in my AngularJS Restful application

I was attempting to create CRUD operations in AngularJS. Unfortunately, I am facing an issue where my ng-click is not functioning properly. Below is the code for my list.html: <div class="container"> <input type="text" ng-controlle ...

javascriptangularjsangularjs-directive

Assistance with offsetting a jQuery drop down menu

This is the third jQuery script that I've been working on. While parts of it have been inspired by other scripts, I'm now focusing on implementing a specific feature. I've dedicated 4 hours to solving the issue of displaying the submenu on ...

javascriptjquerydrop-down-menu

Customizing the field_error_proc in Rails is causing issues with the HTML layout

Within a rails application, I have customized the field_error_proc to enable inline error displays as shown below: https://i.sstatic.net/DjmdN.png The code snippet for achieving this functionality is outlined here: ActionView::Base.field_error_proc = pr ...

htmlcssruby-on-railsbootstrap-4

Error message: "Unable to access D3 data when trying to select nested

Working with JSON data in D3 is proving to be a challenge for me. The file seems to be properly read, as indicated by its appearance when I use console.log, and it appears to be correctly formatted based on the examples I have come across. However, when I ...

javascriptjsond3.js

Tips for minimizing padding and margin in a Bootstrap template

I recently downloaded the page from "https://getbootstrap.com/docs/5.3/examples/heroes/", and I've removed all sections in index.html except for the "hero" section and the "sign-up form". However, there is too much white space between these two elemen ...

cssbootstrap-5paddingmarginfont-size

There was an issue with Angular 2.0 at :0:0, which was caused by a response with status: 0 from the URL: null

I am a beginner in Angular 2.0 and I am currently working on creating a sample application using @angular\cli. To serve the application on my local machine, I use the command ng serve --open, which opens it at localhost:4200. Now, I have developed a ...

javascriptangularangular2-services

Difficulty encountered when deploying cloud function related to processing a stripe payment intent

I've been troubleshooting this code and trying to deploy it on Firebase, but I keep running into a CORS policy error: "Access to fetch at ... from origin ... has been blocked by CORS policy." Despite following Google's documentation on addressin ...

javascriptnode.jsvue.jsgoogle-cloud-functions

Unable to retrieve private field using a public getter method through a proxy

When retrieving data from a VueX Module using a Getter, the Object is enclosed within a Proxy that triggers the following error: TypeError: attempted to get private field on non-instance when attempting to access a private property with a public getter. ...

javascriptvue.jsvuex

Issue with async waterfall not triggering the next callback function when combined with a promise

async.waterfall(eventIDs.map(function (eventId) { console.log(eventId); return function (lastItemResult, nextCallback) { if (!nextCallback) { nextCallback = lastItemResult; las ...

javascriptangularjsnode.jsasynchronous

Leveraging Express request-specific variables to facilitate logging with correlation IDs

Our node express app is now incorporating correlation id's to link requests together. These id's are sent in the header from other services, and our middleware captures them, creates a bunyan logger with the id, and includes it in the request obj ...

javascriptnode.jsexpressloggingbunyan

Ways to terminate a script during a submit() event using jQuery

I have a simple form validation script that triggers a JavaScript alert() if any field value is less than 3 characters. However, after the alert, the page scrolls to the top instead of just stopping. Why is this happening? $('submit_button').sub ...

jqueryforms

What's the deal with inline blocks and text in the middle?

Check out this code I created for a navigation bar. HTML : <div class="header-nav"> <div class="header"> <img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" /> </div> <div class="nav" align="c ...

htmlcss

Access the outcome by utilizing a for loop

Within my code, I am utilizing both a function and a loop: var songs = Musics.searchSongs(query).then(function(rs) { return rs; }); for (var i = 0; i < songs.length; i++) { console.log(songs[i]); } I am now looking for a way to execute the ...

javascriptangularjscordovaionic-framework

What methods can I leverage in VueJS to redirect users to a different page or URL?

I am new to JavaScript, so please excuse any mistakes in my code. I am working on a form that utilizes AWS SNS to send an email to my company with the data submitted through the form. The issue I'm facing is that there is no feedback for the user afte ...

javascriptvue.jsvuejs2vue-routeramazon-sns

What is the process of incorporating a JavaScript node module into TypeScript?

Having trouble importing the xml2js module as I keep getting a 404 error stating that it's not found. import xml2js from 'xml2js'; Any suggestions on how to properly import JavaScript modules located in the node_modules directory when work ...

javascripttypescriptnpmnpm-install

Ways to extract image URLs from HTML and use them in Java

Hi there, I am trying to retrieve the URLs for images on Bing. For example, this link returns cat images. How can I specifically obtain the .png URLs? ...

androidhtml

A simple method to obtain the ID of the element that has been clicked and save it in a variable to be utilized in a function responsible for

Seeking assistance in optimizing the code below by removing the specific #static id and allowing for dynamic IDs such as #dynamic within the one click function. This would eliminate the need to repeatedly copy and paste the same function with different ID ...

javascriptjqueryajax

Is it possible to adjust the width of the comment box on the Facebook "Like" button?

Is there a way to set the width of the comment box that appears after clicking the Facebook "Like" button? I know how to adjust the width of the button itself and related content, but can't find any options for the comment box: I've tried overri ...

javascripthtmlcssfacebookfacebook-like