1

Click the button when the display property changes.

example, button class = "1" click results - the first-img class display: block, The second-img class display: none, the third-img class display: none.

button class = "2" click results - the first-img class display: none, The second-img class display: block, the third-img class display: none.

button class = "3" click results - the first-img class display: none, The second-img class display: none, the third-img class display: block.

codepen = http://codepen.io/soso77/pen/bwkYZX

ol,
ul,
li {
  list-style: none;
}
.slider {
  float: left;
  position: relative;
  width: 980px;
}
img.first-img,
img.second-img,
img.third-img {
  max-height: 625px;
  display: block;
}
img.second-img,
img.third-img {
  display: none;
}
<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>

Improve this question
2
  • yea.. i think you need js for this one. Probably the easiest way is to have a class image with display:none; and a class selected with display block. Then on click using js you rremove the selected class for all the elements with class image and add the selected class to the desired image based on the button you clicked. PS: where are the buttons? Commented Oct 25, 2016 at 11:08
  • @Lidaranis Button below to create a class Ul. Can I use Jquery? If Jquery if available, can you tell me? :-) Commented Oct 25, 2016 at 11:13

5 Answers 5

Reset to default
2

Take the class number using attribute class and the use nth-child() to select the image. Here is my short answer:

   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })

See the snippet below for the question requirements:

$(document).ready(function(){

var X = jQuery.noConflict();

var realSlider= X("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);

      }

    });

    var realThumbSlider=X("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 235,
      slideMargin: 9,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*X("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */

      }
    });

    linkRealSliders(realSlider,realThumbSlider);

    if(X("#bxslider-pager li").length<4){
      X("#bxslider-pager .bx-next").hide();
    }

// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){

  X("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=X(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}

//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){

  var $thumbS=X("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");

  if(slider.getSlideCount()-newIndex>=3)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-3);

}

 
});
   $('button').click( function (){
        var number = $(this).attr('class');
        $('ul li img').css('display', 'none');
      $('ul li img:nth-child('+number+')').css('display', 'block');
    })
ol, ul, li {
    list-style: none;
}

.slider {float: left;position: relative;width: 980px;}

img.first-img,img.second-img,img.third-img {
    max-height: 625px;
    display: block;
}

img.second-img,img.third-img {
    display: none;
}

.ori-image-button {position: absolute !important;top:0;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ori-image-button">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <div class="ori-image-button">
  
  
<button class="1">Class 1 </button>
<button class="2">Class 2 </button>
<button class="3">Class 3 </button>
</div>

-    <ul id="bxslider">
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
    </ul>

<ul id="bxslider-pager">
  <li data-slideIndex="1"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-1st" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="2"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-2st" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="3"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-3rd" alt="thumb-img" width="235" height="150"></a>
  <li data-slideIndex="4"><a href=""><img class="first" src="http://placehold.it/235x150/?text=image-4th" alt="thumb-img" width="235" height="150"></a>
</ul>

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you.What should I do when this is the case? codepen.io/soso77/pen/bwkYZX
@sosori I should works without changing the script. Just updated the html. See the update above. Please let me know if this is the answer you were looking for
Sorry :`-( I'm finally trying to use an bxslider. Please click here. codepen.io/soso77/pen/bwkYZX
@sosori It should works without changing the script. you just forget to import the jquery. Just updated the html. See the update above. Please let me know if this is the answer you were looking for
@sosori and you put my script inside a function. Don't do that because it will not fire. I put it outside the function. Please let me know if this is the answer you were looking for
|
0 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button data-notation="true" class="1">Class 1 </button>
<button data-notation="true" class="2">Class 2 </button>
<button data-notation="true" class="3">Class 3 </button>



 <ul>
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
            <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
            <img src="http://placehold.it/980x625/?text=image-3rd" class="third-img" />
        </li>
    </ul>

in the js section:

$(".button[data-notation=true]").on("click",function(){
    var index = parseInt($(this).attr("class"));
    $("ul#list > li > img").hide();
    $("ul#list > li > img").eq(index-1).show()
})
Improve this answer

2 Comments

Added questions.How do you like that case?
you want all second images to load? or what
0

I have posted the sample in the codepen please check with this option.

[view on codepen][1]


  [1]: http://codepen.io/satheeshmallow/pen/xEBpEr

Worked Example

Improve this answer

Comments

0

I made your requirement with adding class and removing class,

it will help you to achieve some what,

HTML:

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>
<button id="showImage1">
Show Image 1
</button>
<button id="showImage2">
Show Image 2
</button>
<button id="showImage3">
Show Image 3
</button>
<button id="showAll">
Show All
</button>

CSS:

img {
    width: 10px;
    height: 10px;
}
.display-none{
  display:none;
}
.display-inline{
  display:inline;
}

JS:

$("body").on('click','#showImage1', function(){debugger; $(".first-img").addClass('display-inline').removeClass('display-none'); $(".second-img,.third-img").addClass('display-none').removeClass('display-inline'); });

$("body").on('click','#showImage2', function(){debugger;
$(".second-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.third-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showImage3', function(){debugger;
$(".third-img").addClass('display-inline').removeClass('display-none');
$(".first-img,.second-img").addClass('display-none').removeClass('display-inline');
});

$("body").on('click','#showAll', function(){
$(".first-img,.second-img,.third-img").addClass('display-inline').removeClass('display-none');
});

FIDDLE

Improve this answer

Comments

-1

Let me know if you like this:

JS(with JQuery) / CSS / HTML

$("button").click(function(){
	$(".first-img").removeClass("selected");
  $(".second-img").removeClass("selected");
  $(".third-img").removeClass("selected");
  $("." + $(this).attr("data-item-class")).addClass("selected");
});
ol,
ul,
li {
  list-style: none;
}
.slider {
  float: left;
  position: relative;
  width: 980px;
}
img.first-img,
img.second-img,
img.third-img {
  display:none;
}

.selected{
  max-height: 625px;
  display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-item-class="first-img">Class 1 </button>
<button data-item-class="second-img">Class 2 </button>
<button data-item-class="third-img">Class 3 </button>

<ul>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
    <li>
        <img src="http://placehold.it/980x625/?text=image-1st" class="first-img selected" />
        <img src="http://placehold.it/980x625/?text=image-2nd" class="second-img" />
        <img src="http://placehold.it/980x625/?text=image-3er" class="third-img" />
    </li>
</ul>

Or fiddle if you like it better https://jsfiddle.net/fart52wL/1/

Also if you don't like using IDs you can use classes for selectors.

[Edit] updates snipped and fiddle

Improve this answer

2 Comments

Thank you.Added content in question.How do you change? codepen.io/soso77/pen/bwkYZX
Let me see if i get this right.. you want all the images with class1 to become visible when you press the button 1, all the images with class 2 to become visible when you press button 2, etc.. ? Updated snippet and fiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.