CODEWITHSUNDEEP
javascripthtmlcssimagegallery
user1199537
user1199537

Reputation: 65

Show and hide images with next previous button using Javascript

I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.

Thanks!

My html Code:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="container">
  <div id="theProduct">
    <div id="slides"> <a href="#" class="prev"><img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"></a> <a href="#" class="next"><img src="img/next.jpg" width="29" height="29" alt="Arrow Next"></a>
      <!-- Show/hide Div  strating here -->
      <div class="slides_container">
        <div class="div1">
          <div class="img1">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>
        <div class="div2">
          <div class="img2">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>
        <div class="div3">
          <div class="img3">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>
        <div class="div4">
          <div class="img4">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>

      </div>
      <!-- Show/Hide Div ending here -->
    </div>
    <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>

Upvotes: 1

Views: 7734

Answers (4)

Bunjerd Sparrow
Bunjerd Sparrow

Reputation: 88

Practical with this below

<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>

Javascipt

<script type="text/javascript">
var $c =0;
function next(){
    var boxes = document.getElementsByClassName("box");
    $c +=1;
    if($c >= boxes.length) $c = 0;
    for (var $i=0;$i<boxes.length;$i++){
        boxes[$i].style.display  = "none";
    }
    boxes[$c].style.display  = "block";
    return false;
}
function prev(){
    var boxes = document.getElementsByClassName("box");
    $c -=1;
    if($c < 0) $c = (boxes.length-1);   
    for (var $i=0;$i<boxes.length;$i++){
        boxes[$i].style.display  = "none";
    }
        boxes[$c].style.display  = "block";
    return false;   
}
</script>

HTML

    <div id="container">
    <div id="box-red" class="box">DIV1</div>
    <div id="box-yellow" class="box">DIV2</div>
    <div id="box-green" class="box">DIV3</div>
    <div id="box-maroon" class="box">DIV4</div>
</div>
    <a href="#" onClick="return prev();">previous</a>  &nbsp; <a href="#" onClick="return next();">next</a>

Upvotes: 2

Naman Goel
Naman Goel

Reputation: 1612

technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.

Also Selectivizr is a good polyfill for old browsers

Upvotes: 0

AMember
AMember

Reputation: 3057

function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);

var images = imageContainer.childNodes;

var showIndex = '';
for(var i=0; i<images.length;i++){
  if(images[i].style.display == 'block'){
    images[i].style.display == 'none';
    if(forwrad){
      showIndex = 1+1;
    }
    else{
      showIndex = 1-1;
    }
  }
}
images[showIndex].style.display = true;
}

Upvotes: 0

premik91
premik91

Reputation: 89

I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

But you could put that in one function:

<script language="JavaScript">
function ShowHide(divId){
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
</script>

Upvotes: 0

Related Questions