Help with adding CSS to jquery

Question

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.

Thomas Li · Accepted Answer · 2011-03-28 19:49:52Z

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);
        }
      }
    });
});

I dont know how to thank you! I will try to read the script and see what you have done. I dont know what I can do for yoou cause you saved me a lot of time

clairesuzy · Accepted Answer · 2011-03-28 19:37:34Z

1

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

answered Mar 28, 2011 at 19:37

clairesuzy

27.7k8 gold badges56 silver badges52 bronze badges

2 Comments

TooCooL Over a year ago

can you help me in details because I try to add z-index but whatever I do the script stops working! I might not be on the right track.. thanks for your time!

clairesuzy Over a year ago

I upvoted the accepted answer as I think that's your best case to keep with the existing script, You can toggle the classes based on the width of the image and add the z-index the parent - but ultimately that's like re-writing another little script

Kaivosukeltaja · Accepted Answer · 2011-03-28 19:36:18Z

0

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

answered Mar 28, 2011 at 19:36

Kaivosukeltaja

15.8k5 gold badges45 silver badges71 bronze badges

1 Comment

TooCooL Over a year ago

a littel bit more detailed please,

Ken Redler · Accepted Answer · 2011-03-28 19:37:16Z

0

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

answered Mar 28, 2011 at 19:37

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

1 Comment

TooCooL Over a year ago

how can I add it to the li? more info? because I have included the jquery files and the jquery script in the index but I dont know how it works, it looks like its like OOP and the class is initated in the index.html but I dont know I am really far from jquery. I am going to need some more help with the details. Thank you for your time.

Mark Costello · Accepted Answer · 2011-03-28 19:39:27Z

0

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.

answered Mar 28, 2011 at 19:39

Mark Costello

4,3944 gold badges25 silver badges26 bronze badges

Comments

jon_darkstar · Accepted Answer · 2011-03-28 19:42:53Z

0

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)

edited Mar 28, 2011 at 19:42

answered Mar 28, 2011 at 19:33

jon_darkstar

16.9k7 gold badges35 silver badges38 bronze badges

Comments

js1568 · Accepted Answer · 2011-03-28 19:49:31Z

0

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

edited Mar 28, 2011 at 19:49

js1568

7,0322 gold badges30 silver badges47 bronze badges

answered Mar 28, 2011 at 19:34

mcgrailm

17.7k22 gold badges85 silver badges131 bronze badges

1 Comment

TooCooL Over a year ago

I have to do this for someone else, and he is a little bit picky :)

NaN · Accepted Answer · 2011-03-28 19:51:22Z

0

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.

answered Mar 28, 2011 at 19:51

NaN

1252 silver badges6 bronze badges

1 Comment

TooCooL Over a year ago

yeah I know, but for me now its the wrong time at the wrong place, thats why I cant jump to the pool! anyway.. thank you for your time

Collectives™ on Stack Overflow

Help with adding CSS to jquery

8 Answers 8

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related