CODEWITHSUNDEEP
javascriptjquerycss
TooCooL
TooCooL

Reputation: 21202

Help with adding CSS to jquery

I am really new to jquery and I dont really have time to see how it works (I work with PHP a lot) I want to make a jquery slideshow but I dont know how to add z-index to the images here: http://www.albavid.com/new/index.html

I can see that jquery adds some css elements like opacity, width.. etc. I tried to add a bigger z-index to the current image and lower z-index to the right images and left images.

Can anyone tell me how to add css with jquery so the current image(the biggest) to be on the top and then the others behind it.

Upvotes: 0

Views: 927

Answers (8)

NaN
NaN

Reputation: 125

Z-index'ing the <li> instead of the <img> is the right solution to fix the overlap. However, because the <li>s are dynamic and flip before and after each other, an applied z-index to all in a sequential order from left-to-right will not solve his issue.

Solving the issue will need a few more actions to invoke within jquery but not too much extra work. What needs to happen is for jQuery to apply a z-index to the current <li> higher than the rest of the batch for each event on the slider.

Since I don't have access to your code, you basically want to apply the following logic: Whatever <li> is in front it should have a z-index:1 and all other <li>s should have z-index:0. This should happen on every change in the slider.

@mcgrailm: Give him a break man, you can't learn how to swim unless you jump into the pool.

Upvotes: 0

Thomas Li
Thomas Li

Reputation: 3338

Replace your javascript on the page with this:

I added in $(el).css('z-index', 5) and $(el).css('z-index', 0) in currentCss, beforeCss, and afterCss.

jQuery( document ).ready( function(){
    jQuery( '#flip' ).jcoverflip({
      current: 2,
      beforeCss: function( el, container, offset ){
        $(el).css('z-index', 0);
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,200-10*offset*offset) + 'px' }, {} )
        ];
      },
      afterCss: function( el, container, offset ){
        $(el).css('z-index', 0);
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '10px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,200-10*offset*offset) + 'px' }, {} )
        ];
      },
      currentCss: function( el, container ){
        $(el).css('z-index', 5);
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 200 )+'px', bottom: 0 }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: '400px' }, { } )
        ];
      },
      change: function(event, ui){
        jQuery('#scrollbar').slider('value', ui.to*25);
      }
    });


    jQuery('#scrollbar').slider({
      value: 50,
      stop: function(event, ui) {
        if(event.originalEvent) {
          var newVal = Math.round(ui.value/25);
          jQuery( '#flip' ).jcoverflip( 'current', newVal );
          jQuery('#scrollbar').slider('value', newVal*25);
        }
      }
    });
});

Upvotes: 2

mcgrailm
mcgrailm

Reputation: 17640

rather then waste your time reinventing the wheel why not just use a jquery slideshow plugin?

Upvotes: 0

jon_darkstar
jon_darkstar

Reputation: 16788

You can alter the inline CSS by selecting the element and using the css method

Suppose an element has no z-index, or a different one, and you want to change it to 5

$("#elementId").css('z-index', 5);

Another option is to set up classes with certain CSS styles before hand and change the class of certain elements ie (currentShown, nextUp, etc)

Upvotes: 0

Mark Costello
Mark Costello

Reputation: 4394

You can alter the z-index of an element by using the .css() function. 

$("#elem").css('z-index','1000');

However, two better options would be to either define CSS classes for the elements you want to style and toggle between them, or use some nice jQuery slideshow plugins.

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27674

you can also get it working by using different classes the use addclass() - removeClass() to toggle the effect works well if you're already familiar with CSS overrides

Upvotes: 1

Ken Redler
Ken Redler

Reputation: 23943

It looks like the z-index in question should be applied to the <li>, not the <img>.

Upvotes: 0

Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

Try setting the position property of the elements to relative, otherwise they will be treated as static and ignore all settings to z-index.

Upvotes: 0

Related Questions