Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with JQuery script!

    Hey guys I'm working on this slider/carousel type idea and have used javascript before but am fairly new to using jquery. Here's the problem, the code works perfectly before I added the $('img').removeClass('cur') and addClass but after I add them it messes up. What i am trying to do is add a z-index value to the img who's width i am changing in the line right above it. So I figured I could just add a class with z-index and remove it after. Is there any easier way? I just want the CurrentCSS to have the high zindex and the after and before to set a lower. I think I may just be having a syntax issue? Any help would be great guys! Thanks so much.

    Code:
    jQuery( document ).ready( function(){
            jQuery( '#flip' ).jcoverflip({
              current: 0,
              beforeCss: function( el, container, offset ){
                return [
                  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 320 - 270*offset + 60*offset )+'px', bottom: '20px' }, { } ),
                  $.jcoverflip.animationElement( el.find( 'img' ), { width: 200 + 'px' }, {} ), 
                  $('img').removeClass('curr')              
                ];
              },
              afterCss: function( el, container, offset ){
                return [
                  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 180 + 210*offset )+'px', bottom: '20px' }, { } ),
                  $.jcoverflip.animationElement( el.find( 'img' ), { width: 200 + 'px' }, {} ),  
                  $('img').removeClass('curr')
                ];
              },
              currentCss: function( el, container ){
                return [
                  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 180 )+'px', bottom: 0 }, { } ),
                  $.jcoverflip.animationElement( el.find( 'img' ), { width: '400px' }, { } ),
                  $('img').addClass('curr')
                  
    			  
                ];
                  
              },
              change: function(event, ui){
                jQuery('#scrollbar').slider('value', ui.to*25);
              }
            });

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I dunno without getting down and properly dirty with it, but at a guess I'd say:

    $('img').removeClass('curr')

    should be:

    el.find( 'img' ).removeClass('curr')

    to affect only the image in question

    and the whole removeClass() line shouldn't be in the return statement for the callback function. I'd take it out of there and put it immediately below:

    beforeCss: function( el, container, offset ){

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    awesome thank you so much, that worked!

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys... I'm trying the same thing, only I'm wanting to bring the current <li> to the front.

    My code is below (see it in action here), but I seem to be missing something.

    Any help would be appreciated!

    Code:
    <script type="text/javascript">
    $(document).ready( function(){
    	$('#flip').jcoverflip({
    		current: 0,
    	  
    		beforeCss: function(el,container,offset){
    			container.find('li').removeClass('curr');
    			return [
    			$.jcoverflip.animationElement(el,{left:(container.width()/2-410-360*offset+10*offset)+'px', bottom:'0px'},{} ),
    			$.jcoverflip.animationElement(el.find('img'),{width:Math.max(10,550-10*offset*offset)+'px'},{} ),
    			];
    		},
    	  
    		afterCss: function(el,container,offset){
    			container.find('li').removeClass('curr');
    			return [
    			$.jcoverflip.animationElement(el,{ left:(container.width()/2+60+360*offset)+'px', bottom:'0px'},{} ),
    			$.jcoverflip.animationElement(el.find('img'),{ width:Math.max(10,550-10*offset*offset)+'px'},{} ),
    			];
    		},
    	  
    		currentCss: function(el,container){
    			container.find('li').addClass('curr');
    			return [
    			$.jcoverflip.animationElement(el, {left:(container.width()/2-300)+'px', bottom:0},{} ),
    			$.jcoverflip.animationElement(el.find('img'), {width:'600px'}, { } ),
    			];
    		},
    	});
    });
    </script>
    Last edited by aramtch; 05-18-2010 at 02:37 PM. Reason: disabling smilies

  • #5
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    solved...

    ahh got it.

    In case anyone else needs help, it's

    el.removeClass('curr')

    and

    el.addClass('curr')



    Now if I can just get wrapAround=true to work the way I envision it...

    See the API here

  • #6
    New to the CF scene
    Join Date
    Jan 2011
    Location
    London, UK
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    proper solution for changing the z-index

    The script itself offers a way to change the z-index of the animated elements.
    Refering to the comments in the script it has to be layed out like this:

    Code:
    $.jcoverflip = {
    	/**
    	 * Used for wrapping the animation for an element for returned by 
    	 beforeCss, afterCss and currentCss options.
    	 ...
    	 * @param steps
    	 *   An object with keys from 0 to 1 (0 to 100%) for how far along 
    	 in the animation (0: start,
    	 *   0.5: half way through, 1: end) with the value being an object of 
    	 CSS keys and values to change.
    	 *   This is for discrete values that need to change such as z-index.
    	 *
    	 */
    	animationElement: function( element, animate, steps ){ 
    		return { element: element, animate: animate, steps: steps };
    	},
    so, the steps parameter can control the prev/next/actual item's z-index,
    and also specify the timing of the change.

    it's layed out with JSON, it took us a while to figure it out, but we did it, and it works fine.

    { timing: {'css-key': 'value'} }

    where:
    - timing is a float between 0 and 1 representing 0% to 100%
    - css-key is the css attribute name string, like 'z-index' or 'opacity' or 'display' etc.
    - value is the css value, which is a string as well like '1' or '0.6' or 'none'

    in practice it looks like this:

    Code:
    	$( '#flip' ).jcoverflip({
    	  current: 2,
    	  beforeCss: function( el, container, offset ){
    		return [
    		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', top: '40px' }, 
    	 	 { 0: {'z-index': '1'} } ),
    		  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,127-20*offset*offset) + 'px' }, {} )
    		];
    	  },
    	  afterCss: function( el, container, offset ){
    		return [
    		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 90 + 110*offset )+'px', top: '40px' }, 
    	 	 { 0: {'z-index': '1'} } ),
    		  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,127-20*offset*offset) + 'px' }, {} )
    		];
    	  },
    	  currentCss: function( el, container ){
    		return [
    		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 127 )+'px', top: 0 }, 
    	 	 { 0: {'z-index': '2'} } ),
    		  $.jcoverflip.animationElement( el.find( 'img' ), { width: '254px' }, { } )
    		];
    	  },
    	  change: function( event, ui ){
    	  
    	  }
    	});
    Enjoy

    Ps.: if you want to implement a bit more advanced control of the z-indexes, you can use the script provided offset values to assign individual z-indexes. I did so because I had to create a circular carousel for the project I'm working on.

    the sample code below will assign values for all the items left-to right as the following pattern:

    ascending from left side items to center item (i.e.:-2, -1, 0, 1)
    and descending back to the right side items (i.e.: 0, -1, -2)

    For accomplishing this I defined a new variable, "offsetMod", and assigned the (max.z-index - 1) value.
    this needs to be added to the beforeCss and afterCss methods.
    Finally I assigned the max.z-index value to the current item.
    The changed part is empasised below.

    Code:
    	$( '#flip' ).jcoverflip({
    	  current: parseInt(($( '#flip li' ).length) / 2),
    	  beforeCss: function( el, container, offset ){
    		var offsetMod = (2 - offset);	  
    		return [
    		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 204 - 60*offset + 20*offset )+'px', top:  Math.min(160,50+25*offset*offset)+'px' }, 
    		  { 0: {'z-index': offsetMod } } ),
    		  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,160-50*offset*offset) + 'px' }, {} )
    		];
    	  },
    	  afterCss: function( el, container, offset ){
    		var offsetMod = (2 - offset);	  
    		return [
    		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 44 + 90*offset )+'px', top: Math.min(160,50+25*offset*offset)+'px' }, 
    		  { 0: {'z-index': offsetMod } } ),
    		  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,160-50*offset*offset) + 'px' }, {} )
    		];
    	  },
    	  currentCss: function( el, container ){
    		return [
    		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 127 )+'px', top: 0 }, 
    		  { 0: {'z-index': '3' } } ),
    		  $.jcoverflip.animationElement( el.find( 'img' ), { width: '254px' }, { } )
    		];		
    	  },
    	  change: function( el, event, ui ){
    
    	  }
    	});
    Last edited by aron; 01-21-2011 at 12:38 PM. Reason: additional info


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •