警报，hasClass和其他不起作用pikachoose滑块

Question

Here is my website: http://www.proservinformatika.hu/!orex/

I exactly added the "pikachoose" gallery slider plugin (it's free - http://www.pikachoose.com ), and it works so fine! You can see the thumbnails under the full image. I finally solved to make captions at the center of the thumbs.

And you can see the <li class="active capik-no"> thumb active status, and you can see the slider continuously changing the images after a few seconds.. When the slider changes to another image, the first current <li class="active capik-no"> changing to simple <li> and the second <li> changing to <li class="active capik-no"> . Yea this is an automatic slider everlasting process..

My problem is: I'm tried to do the alert() fn. like this:

        if ($('.pikachoose li').hasClass("active")) {
           alert('test');
        }

or

        if ($('.pikachoose li').hasClass("capik-no")) {
           alert('test');
        }

The capik-no is just a test class. With a "display: none;" css code. The capik is just a test class. With a "display: block; position: absolute;" css code.

The alert and console.log doesn't work... and you can see in the code <span class="capik">Text 1</span> "capik" class is the thumbnail caption...

My plan is: Trying to change the thumb's active status to this: Active thumb status don't have caption.. Only the passive status thumbs have. And I'd like to solve this with hasClass, addClass, removeClass variety of solutions.

BUT.... The alert and others doesn't work... I guess JQuery generates the active and capik-no classes...

So especially the system can't find this <li> classes because of generated by JQuery??? The alert can't run.. the console.log can't run with these classes.....

So the hasClass and others can't run too... And I can't solve to make the active thumb status to hide the caption with capika-no class....

Here is the js: http://www.proservinformatika.hu/!orex/js/jquery.pikachoose.js

Please check the either thumb image element (Ctrl-Shift-i). Here is the simple code:

<div class="pikachoose">
    <ul class="jcarousel-skin-pika pika-thumbs">
        <li class="active capik-no">
            <div class="clip">
                <img ref="http://www.proservinformatika.hu/!orex//images/slider-main/big/1.jpg" src="http://www.proservinformatika.hu/!orex//images/slider-main/small/1.jpg" class="" style="display: inline; width: 100%; opacity: 0.4;">
                <span class="capik">Text 1</span>
            </div>
        </li>
        <li>
            <div class="clip">
                <img ref="http://www.proservinformatika.hu/!orex//images/slider-main/big/2.jpg" src="http://www.proservinformatika.hu/!orex//images/slider-main/small/2.jpg" class="" style="display: inline; width: 100%; opacity: 0.4;">
                <span class="capik">Text 2</span>
            </div>
        </li>
        <li>
            <div class="clip">
                <img ref="http://www.proservinformatika.hu/!orex//images/slider-main/big/3.jpg" src="http://www.proservinformatika.hu/!orex//images/slider-main/small/3.jpg" class="" style="display: inline; width: 100%; opacity: 0.451875827717631;">
                <span class="capik">Text 3</span>
            </div>
        </li>
        <li>
            <div class="clip">
                <img ref="http://www.proservinformatika.hu/!orex//images/slider-main/big/4.jpg" src="http://www.proservinformatika.hu/!orex//images/slider-main/small/4.jpg" class="active capik-no" style="display: inline; width: 100%; opacity: 1;">
                <span class="capik">Text 4</span>
            </div>
        </li>
    </ul>
</div>

My current code to solve the problem is (but doesn't work...=/ ):

if($('.pikachoose li').hasClass('active')) {
    $('.pikachoose li span').addClass('capik-no');
    $('.pikachoose li span').removeClass('capik');
} else {
    $('.pikachoose li span').addClass('capik');
    $('.pikachoose li span').removeClass('capik-no');
}

Please heelp!!:/ I want to hide the caption from the activated status of the thumb!!:(

Answer 1

I want to hide the caption from the activated status of the thumb

I think all you need here is a bit of CSS to hide the caption <span class="capik"> when the li has the class active

.pika-thumbs .active .capik { display: none; }

Hide caption when the thumb is hovered on:

.pika-thumbs li:hover .capik { display: none; }