It is not possible to attach separate links to images in a JavaScript slider

I am struggling with linking individual images in a JavaScript slider for a client's website. The slider is fully functional and works well, but I can't seem to figure out how to link the images properly.

When I remove items from <--ul class="items"-->(below), I am able to add links to the <--li--> images and have them behave as normal links. However, this causes the JavaScript slider function to stop working. I have tried everything I could think of.

My objective is to link each image to its corresponding page on the site. There are a total of 4 images. I am relatively new to this kind of coding, so any assistance would be greatly appreciated.

<script>
    $(document).ready(function(){
      $('.gallery')._TMS({
      show:0,
      pauseOnHover:true,
      prevBu:'.prev',
      nextBu:'.next',
      playBu:'.play',
      duration:700,
      preset:'fade',
      pagination:$('.img-pags').uCarousel({show:4,shift:0}),
      pagNums:false,
      slideshow:7000,
      numStatus:true,
      banners:false,
      waitBannerAnimation:false,
      progressBar:false 



      })        
 })

Website

    <div class="container_12">
      <div class="grid_12">
        <div id="slide">                
            <div class="gallery">
            <ul class="items">

                    <li><a href="about.html"><img src="images/gallery-big-1.jpg" alt="">     </a></li>

                    <li><img src="images/gallery-big-5.jpg" alt=""></li>

                    <li><img src="images/gallery-big-2.jpg" alt=""></li>

                    <li><img src="images/gallery-big-6.jpg" alt=""></li>
               </ul>

            </div>
            <a href="#" class="prev"></a><a href="#" class="next"></a>
        </div>      
      </div>



#slide {  width:940px; height:415px; position:relative; overflow:hidden; z-index:2; }

.gallery {
width:940px;
position:relative;
z-index:2
}
.items {display:none;}
.pag { position:relative;}
.img-pags {position:static; left:0px; z-index:1; display:block;}
.img-pags ul {margin:0}
.img-pags li { width:200px; height:170px; margin-right:20px; display:block;     overflow:hidden;  }
.img-pags li a {position:relative;display:block;border:#f4f4f4 5px solid; }
.img-pags li a img {}
.img-pags li a span{ display:block; background:#fff;}
.img-pags li.active a,.img-pags li a:hover{border:#CCC 5px solid;}
.img-pags li.active a img,.img-pags li a:hover img{}
.prev {background:url(../images/prev-1.gif) 0 0 no-repeat; bottom:1px; left:1px;      display:block; position:absolute; width:44px;height:44px; z-index:9999;}
.next{background:url(../images/next-1.gif) 0 0 no-repeat; bottom:1px; right:1px; display:block; position:absolute; width:44px;height:44px; z-index:9999;}
.prev:hover, .next:hover {background-position: 0 bottom;}
javascriptjqueryhtmlcss

Answer №1

Embellish your gallery images using jQuery by enclosing them in <a> tags, showcasing a demonstration on Fiddle.

HTML EMBEDDED BELOW:

<div id="slide">

  <div class="gallery">

    <ul class="items">

      <li>
        <img src="images/gallery-big-1.jpg" alt="" data-link="http://google.com" />
      </li>
      <li>
        <img src="images/gallery-big-5.jpg" alt="" data-link="http://jsfiddle.net" />
      </li>
      <li>
        <img src="images/gallery-big-2.jpg" alt="" data-link="http://stackoverflow.com" />
      </li>
      <li>
        <img src="images/gallery-big-6.jpg" alt="" data-link="http://api.jquery.com" />
      </li>

    </ul>

  </div>

  <a href="#" class="prev"></a> <a href="#" class="next"></a>

</div>

JQuery Functionality:

Suggested placement of the code prior to </body> tag.

$(function() {

  $('.gallery ul li img').each(function() {

    var imgHref = $(this).attr('data-link');

    $(this).wrap('<a href="' + imgHref + '"</a>');

  });

});

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

Unable to utilize a computed property within the data section

I am working with an array in my data: data () { return { steps: [ { disabled: this.someCheck } ] } } Additionally, I have a computed property: computed: { ...mapGetters({ getFinishedSteps: 'jobFound/getFinishedS ...

javascriptvue.jsvuejs2vue-componentvue-reactivity

Troubleshooting the failure of the fetch function in my React application

Currently, I am delving into full-stack development with a focus on Js, React, and Express coupled with a Postgres database. The server is configured to run on localhost:5003, and the backend app.js file contains the following code: const express = require ...

javascriptreactjsexpress

The JQuery JavaScript function fails to complete its execution

Question: How can I resolve the issue where my PHP file returns a large JSON string with approximately 2000 elements, each having 14 child elements? When using jQuery AJAX to fetch the JSON and populate an ID-identified table, the filling process stops mid ...

javascriptphpjqueryajaxjson

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

javascripthtmlajax

When the buffer is sent through the socket in NodeJS, the console responds by stating that it is not recognized as a buffer

I've been exploring the implementation of AES encryption in ECB mode and here is the code snippet I'm working with. function encrypt (key, iv, plaintext) { if(algorithm == 'aes-128-ecb') iv = new Buffer(''); var ciphe ...

javascriptjsonnode.jssocketsencryption

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span has negative margins to reduce the ...

htmlcss

What sets usePreloadedQuery apart from useQueryLoader?

I've been exploring graphQL and the react-relay library. These are the key points I've covered: Rendering Queries: where usePreloadedQuery is introduced. Fetching Queries for Render: where useQueryLoader is introduced. To keep it simple, I&apo ...

javascriptreactjsgraphqlreact-relay

Leveraging a specialized Angular filter as a cellFilter within the columnDefs of ui-grid, set in an Angular constant

In my Angular application called myApp, I have a unique filter named myFilter. Additionally, I am utilizing UI Grid to display data in multiple grids such as myGrid1 and myGrid2. To streamline the process, I have organized column definitions for these grid ...

javascriptangularjsangular-ui-grid

The AJAX request to the REST service is failing to trigger the success function in the AJAX call

Struggling with some issues related to AJAX, specifically when calling a Java REST server that I've developed. While I am relatively new to AJAX, I have put in quite a bit of effort searching for solutions. The problem arises when making a call from a ...

javajavascriptajaxjsonrest

Mix up and present cards for a game of blackjack (Javascript)

Have you noticed why "card2" is randomly adding an object to the array? It should consistently add objects to the array. const cards=[ { card: '&#127137', value: '1' }, { card: '&#127138', valu ...

javascriptloopsblackjack

using mixins with styled-components

I have encountered a challenge while attempting to pass a mixin from Material UI to a styled-component. The problem lies in finding a way to transfer the mixin value to the styled-component without having to assign it to a css property. Unfortunately, dire ...

cssmaterial-uistyled-components

Having trouble transferring ASP server control value to a Javascript function

Currently working with ASP.NET 2.0. My Entry Form contains various ASP.NET Server Controls, such as TextBoxes. I want to pass the value of a TextBox on the onBlur event. Here is an example of a TextBox code: <asp:TextBox ID="txtTotalTw" Width="80px" r ...

c#javascriptasp.netasp.net-2.0

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css

Is there a way to use jQuery to determine if the selectAll checkbox is selected after manually selecting all checkboxes?

How can I accomplish this task? I believe I am capable of doing it. <input type='checkbox' id='selectAll'/> <input type='checkbox' id='select1' class='select'/> <input type='checkbox&apo ...

jquery

"Integrating JSON data into AMCharts for dynamic data visualization

Having some trouble with my chart rendering properly. The key and column titles are displaying, but the bars for the data values aren't generating. I'm confident in my PHP code and using json_encode to return the data. Below is the data being pa ...

jqueryjsonajaxamcharts

Encountering difficulty locating a module despite following the correct path according to the official NEXT.js documentation

Recently, I delved into the world of next.js and found myself engrossed in chapter 4 of the official documentation titled "Creating Layouts and Pages." In this chapter, I was prompted to create a file named layout.tsx and insert the following code: import ...

javascriptreactjsnext.jsweb-development-serverweb-frontend

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?

I am currently using chart.js within an Angular framework to visually display data. Is there any method available to reset the y-axis data when changing tabs? Take a look at this Stackblitz demo for reference. Upon initial loading of the page, the data ...

htmlangulartypescriptchart.js

React, facing the challenge of preserving stored data in localStorage while accounting for the impact of useEffect upon

Seeking some assistance with the useEffect() hook in my Taking Notes App. I've set up two separate useEffects to ensure data persistence: one for when the page first loads or refreshes, and another for when a new note is added. I've added some l ...

javascripthtmlreactjsdom

Discovering and sorting an array in Vue.js based on IDs

Hello everyone, I've been attempting to filter my results using the filter and includes methods but it doesn't seem to be working. Does anyone have a solution for this, perhaps involving includes or something similar? companies ids [1,2,3] user c ...

javascriptjsonvue.js

Creating an XML response to generate an HTML dropdown menu in PHP

My onChange function in javascript calls a PHP file to fetch UPS rates and update an HTML dropdown list. Everything was working fine until I needed to add an item to the options list based on a comparison. Javascript: function fetch_UPS(el){ var zip = ...

javascriptphphtmlxmlxslt