Issue with z-index causing the image to not display when navigating through an image gallery with previous and next buttons using

$(document).ready(function(){
  $(".divs div.panel").each(function(e) { 
              if (e > 2) 
                  $(this).hide(); 
                  console.log(e); 
          }); 
         
          $("#next").click(function(){ 
              if ($(".divs div.panel:visible:last").next().length != 0){ 
                  $(".divs div.panel:visible:last").next().show(); 
                  $(".divs div.panel:visible:last").next().show(); 
                  $(".divs div.panel:visible:first").hide(); 
                  $(".divs div.panel:visible:first").hide(); 
              } 
              else { 
                  //either hide the next button or show 1st two again. :) 
              } 
              return false; 
          }); 
         
          $("#prev").click(function(){ 
              if ($(".divs div.panel:visible:first").prev().length != 0){ 
                  var curVisLen = $(".divs div.panel:visible").length; 
                 $(".divs div.panel:visible:first").prev().show(); 
                  $(".divs div.panel:visible:first").prev().show(); 
                  $(".divs div.panel:visible:last").hide(); 
                  if(curVisLen == 3){ 
                    $(".divs div.panel:visible:last").hide(); 
                  } 
              } 
              else { 
                  // either hide the button or show last two divs 
                  // $(".divs div.panel:visible").hide(); 
                  // $(".divs div.panel:last").show(); 
              } 
              return false; 
          }); 
          });
body{
  background-color: grey;
}
  .dash-img-dv{
  position: absolute;
  width: 170px;
  height: 221px;
   -moz-box-shadow: inset 5px -59px 63px 4px #5642BE;
    -webkit-box-shadow: inset 5px -59px 63px 4px #5642BE;
    box-shadow: inset 5px -59px 63px 4px #5642BE;
  }
  .dash-img-dv img {
  width: 170px;
  height: 221px;
  position: relative;
  z-index: -1;
}
.dash-img-dv-ttle{
  position: relative;
  width: 153px;
  height: 50px;
  color: #fff;
  margin-left: 16px;
  margin-top: 167px;
  z-index: 1;
}
.panel{
  display: inline-block;
  margin-left: 10px;
}
.gallery {
  background: #CCC;
  position: relative;
  margin: 0 auto;
  padding-top: 22px;
}
.prev-next-button {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #5642BE;
  transform: translateY(-50%);
}
.prev-next-button a{
  color: #fff;
  position: absolute;
  left: 28%;
  top: 21%;
}
.previous { left: -16px; }
.next { right: -16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<div class="divs">

    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title1</p>
      </div> 
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title2</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title3</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title4</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title5</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title6</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title7</p>
      </div>
    </div>
</div>
<!--  <a id="prev">prev</a>
<a id="next">next</a> -->
<div class="prev-next-button previous">
   <a id="prev"><span class="fa fa-chevron-left"></span></a>
</div>
 <div class="prev-next-button next">
     <a id="next"><span class="fa fa-chevron-right"></span></a>
  </div>
</div>

I need assistance in displaying the images for my next and previous div using jQuery. The script I have tried seems to be working fine, but the issue is that the images are not showing up. Is there a problem with the z-index or something similar that could be causing this issue? I'm unable to figure out why the images are not being displayed. Could someone please help me troubleshoot and resolve this problem? Here is an image link to how it should look before writing the script: https://i.sstatic.net/FrCEI.png

javascriptjquerycssangularjstwitter-bootstrap

Answer №1

When the image has a negative z-index, it will be positioned behind everything else on the page except for elements that are positioned. To prevent the image from being pushed behind the .panel element and instead keep it between .panel and the element with the desired inner box shadow, add a z-index to .panel.

$(document).ready(function(){
  $(".divs div.panel").each(function(e) { 
              if (e > 2) 
                  $(this).hide(); 
                  console.log(e); 
          }); 
         
          $("#next").click(function(){ 
              if ($(".divs div.panel:visible:last").next().length != 0){ 
                  $(".divs div.panel:visible:last").next().show(); 
                  $(".divs div.panel:visible:last").next().show(); 
                  $(".divs div.panel:visible:first").hide(); 
                  $(".divs div.panel:visible:first").hide(); 
              } 
              else { 
                  //either hide the next button or show 1st two again. :) 
              } 
              return false; 
          }); 
         
          $("#prev").click(function(){ 
              if ($(".divs div.panel:visible:first").prev().length != 0){ 
                  var curVisLen = $(".divs div.panel:visible").length; 
                 $(".divs div.panel:visible:first").prev().show(); 
                  $(".divs div.panel:visible:first").prev().show(); 
                  $(".divs div.panel:visible:last").hide(); 
                  if(curVisLen == 3){ 
                    $(".divs div.panel:visible:last").hide(); 
                  } 
              } 
              else { 
                  // either hide the button or show last two divs 
                  // $(".divs div.panel:visible").hide(); 
                  // $(".divs div.panel:last").show(); 
              } 
              return false; 
          }); 
          });
body{
  background-color: grey;
}
  .dash-img-dv{
  position: absolute;
  width: 170px;
  height: 221px;
   -moz-box-shadow: inset 5px -59px 63px 4px #5642BE;
    -webkit-box-shadow: inset 5px -59px 63px 4px #5642BE;
    box-shadow: inset 5px -59px 63px 4px #5642BE;
  }
  .dash-img-dv img { 
  width: 170px;
  height: 221px;
  position: relative;
  z-index: -1;
}
.dash-img-dv-ttle{
  position: relative;
  width: 153px;
  height: 50px;
  color: #fff;
  margin-left: 16px;
  margin-top: 167px;
  z-index: 1;
}
.panel{
  display: inline-block;
  margin-left: 10px;
  position: relative;
  z-index: 1;
}
.gallery {
  background: #CCC;
  position: relative;
  margin: 0 auto;
  padding-top: 22px;
}
.prev-next-button {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #5642BE;
  transform: translateY(-50%);
}
.prev-next-button a{
  color: #fff;
  position: absolute;
  left: 28%;
  top: 21%;
}
.previous { left: -16px; }
.next { right: -16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<div class="divs">

    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title1</p>
      </div> 
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title2</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title3</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title4</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title5</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title6</p>
      </div>
    </div>
    <div class="panel">
      <div class="dash-img-dv">
        <img src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_63351521.jpg">
      </div>
      <div class="dash-img-dv-ttle">
        <p>This is title7</p>
      </div>
    </div>
</div>
<!--  <a id="prev">prev</a>
<a id="next">next</a> -->
<div class="prev-next-button previous">
   <a id="prev"><span class="fa fa-chevron-left"></span></a>
</div>
 <div class="prev-next-button next">
     <a id="next"><span class="fa fa-chevron-right"></span></a>
  </div>
</div>

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

JavaScript 3D Arrays

Is there a way to create a 3D array similar to runes['red'][0]['test']? If so, how can I accomplish this? var runes = {} runes['red'] = [ 'test': ['loh'] ] runes['blue'] = {} runes[&apo ...

javascriptmultidimensional-array

Encountering a problem when using the routingService to navigate inside a JavaScript function

Within my Angular component, I have a method called onCellPrepared. In this method, I am using jQuery to attach a span tag. I want to be able to trigger an Angular service to navigate to another page when the span tag is clicked. How can I successful ...

javascriptangular

The code "Grunt server" was not recognized as a valid command in the

I recently set up Grunt in my project directory with the following command: npm install grunt However, when I tried to run Grunt server in my project directory, it returned a "command not found" error. Raj$ grunt server -bash: grunt: command not found ...

javascriptnode.jsgruntjsnpmgrunt-contrib-requirejs

JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

FamilyTree= { "name":"Family", "photo":"images/family.jpg", "members":[ { "name":"Parent", "photo":"images/parent.jpg", "relationships":[ { "name":"Spouse", "photo":"images/spouse.jpg" }, ...

javascriptjsonobject

Navigating through JSON data to retrieve specific values and executing repetitive actions

When the form is submitted, I am making an AJAX request to PHP code and this is the response I receive. var data = { "empty":{ "game_sais_no":"Season cannot contain empty value", "game_sc_no":"Category cannot contain empty value", ...

javascriptjqueryjson

Is there a way to ensure that when displaying information boxes with Bootstrap, the inputs do not get misplaced or shuffled to the wrong location

I have been working on a form that needs to display an alert: https://i.sstatic.net/uGKtG.png When clicking the button next to the input control, an alert should appear. Although the alert is showing correctly, the input controls are shifting to the wron ...

htmlcsstwitter-bootstrap-3

"Creating a CSS3 animation for changing the background image source - a step-by-step

Unfortunately, the background-image cannot be animated with keyframes in the following way: @keyframes kick{ 0%{background-image: url(images/img-man-1.png);} 25%{background-image: url(images/img-man-2.png);} 50%{background-image: url(images/im ...

jquerycssanimation

AngularJS: How Components Communicate by Interpolating Child Content

Here is an example showcasing intercomponent communication I am looking to achieve a slightly different functionality. Let's say I want the pane content to act as a tab name. For instance <my-tabs> <my-pane>Hello</my-pane> < ...

angularjscomponentscommunication

Unable to modify the value of an object variable generated from a query in JavaScript, ExpressJS, and MongoDB

Here is the code snippet I've been working on: let addSubmissions = await Submission.find({"type": "add-information"}, (err) => { if(err) { console.log(err) req.flash('error', 'No "add submissions" were found&apo ...

javascriptmongodbexpress

The data in Node AngularJS is not loading upon the page's initial load

When I log in, I am redirected to a different page where a partial page is loaded using an AngularJS route. By clicking on any anchor tag, the respective partial view is displayed. However, I encountered an issue. Upon logging in, I use res.render(pagenam ...

javascriptnode.jsangularjsexpress

Tips for selecting an element within a span by clicking on it?

Is there a way to click on an element that is contained within a span tag? I have attached a screenshot for reference. https://i.sstatic.net/FkhDB.jpg I would greatly appreciate any help on how to successfully click on that specific element. ...

jqueryhtmleclipseselenium-webdriver

What is the best way to incorporate JQuery from the node_modules directory instead of using a CDN in a Laravel 5.8 application?

I am facing an issue with integrating JQuery from my npm packages into my Laravel app. In order to make Datatables and other functionalities work, I need JQuery to be properly set up. Although I have installed JQuery using npm, I am encountering an error w ...

jquerylaravelnpmpackage

Is there a way to display product details in a pop-up instead of directing to a new page on Virtue Mart?

Currently, I am in the process of developing a website using Joomla and VirtueMart. My goal is to showcase product details within a lightbox or pop-up on the current page instead of directing users to another page. To get a better understanding, please v ...

jqueryjoomlavirtuemart

When working with AngularJS, I noticed that the service function within a loop is only executed after all iterations have been completed

Controller Page $scope.page = { '1' : "small", '2' : "large", '3': "medium" }; $scope.form.appraisal_id = "abc123"; $scope.form.user_id = "efg123"; for(var prop in $scope.page ...

javascriptangularjs

Exploring and listing the key-value pairs from several arrays within an object

My inquiry pertains to the following function: function loadConfigurations(configs){ console.log(configs); } The 'configs' object received by the loadConfigurations function contains two properties --two arrays named "assigned" and "unassign ...

javascriptjqueryarraysjavascript-objects

What is the best way to send a variable to a URL when a link is clicked?

Recently, I started learning PHP and ran into a challenge while working on a school project. The specific issue that I'm facing is how to pass variables to a URL when a link is clicked. Essentially, my problem involves a dropdown menu displaying diffe ...

phpjqueryhtml

What is the process for integrating TypeScript compiling into a JavaScript application?

My project includes a build.js file that is responsible for building the project. It has two main objectives: Compile .ts files and store them in a new directory. Create an asar archive containing the compiled files. Since typescript (or tsc) is availabl ...

javascriptnode.jstypescript

Explore the latest update in the AngularJS single page application that introduces a new feature specifically designed for the initial login

Our AngularJS single page application has a new feature that we are ready to launch for customer use. We want to inform the logged in user about this new feature so they can start using it. We are looking for a small animated information symbol with a too ...

javascriptangularjshtmltwitter-bootstrapangular-ui-bootstrap

Dynamic styling based on conditions in Next.js

After a lengthy hiatus, I'm diving back in and feeling somewhat disconnected. In short, I have encountered a minor challenge. I successfully created a navigation menu pop-out that toggles classname based on the isActive condition in React. However, I& ...

javascriptnext.jsconditional-rendering

Toggle the visibility of tooltips based on a condition with uib-tooltip

I am looking for a way to toggle the functionality of a tooltip on a button. I attempted to disable it with the following code snippet: <button type="button" uib-tooltip="test" tooltip-is-open="false"> </button> However, the tooltip stil ...

angularjsangular-ui-bootstrap