How to customize the size of JCoverFlip?


Tags: javascript,jquery,css,jquery-ui

Problem :

I have recently started trying to implement JCoverflip into my website and I currently have what is displayed on this link Current Implementation

However I want to be able to customize the size of the covers so I can use screenshots instead of these smaller covers. I am provided with some customization documentation on their website: Customization Options but I don't know how to use this or style the sizes of the images and container.

The current CSS styles that are provided and used are below:

      .ui-jcoverflip {
    position: relative;
  }

  .ui-jcoverflip--item {
    position: absolute;
    display: block;
  }

  /* Basic sample CSS */
  #flip {
    height: 200px;
    width: 630px;
    margin-bottom: 50px;
  }

  #flip .ui-jcoverflip--title {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    color: #555;
  }

  #flip img {
    display: block;
    border: 0;
    outline: none;
  }

  #flip a {
    outline: none;
  }


  #coverflowwrapper {
    height: 300px;
    width: 630px;
    overflow: hidden;
    position: relative;
    margin:0 auto;
  }

  .ui-jcoverflip--item {
    cursor: pointer;
  }

   #scrollbar {
    position: absolute;
    left: 20px;
    right: 20px;
    display:block;

  }

Could someone please help as I'm confused how to use the documentation provided?

Help would be much appreciated, Thanks.



Solution :

You can change the image sizes and spacing by overruling the default values using the beforeCss, afterCss and currentCss from jCoverflip. Here's my code (notice the width and height attributes):

$('#flip').jcoverflip({
        time: 300, // fade time
        beforeCss: function( el, container, offset ){
            return [
                $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 280 - 190 *offset )+'px', bottom: '20px' }, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.7, width: '150px', height: '84px' }, {} )
            ];
        },
        afterCss: function( el, container, offset ){
            return [
                $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 180 + 190 *offset )+'px', bottom: '20px' }, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.7, width: '150px', height: '84' }, {} )
            ];
        },
        currentCss: function( el, container ){
            return [
                $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: '-10px' }, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 1.0, width: '250px', height: '141px' }, { } )

            ];
        }
    });

and here's my html:

        <div id="flip">
            <div class="flip_item">
                <img src="img/1.jpg" />
                <p class="caption">Product 3</p>
                <div class="info">
                    <div class="descr">Vius, quacins id urna et augue facilisis dictum. </div>
                </div>
            </div>
            <div class="flip_item">
                <img src="img/2.jpg" />
                <p class="caption">Product 5</p>
                <div class="info">
                    <div class="descr">Nullad urna et augue facilisis dictum. </div>
                </div>
            </div>
        </div>

    CSS Howto..

    Yahoo news CSS, how to achieve behavior

    How to refer to children elements in CSS

    How to download an Html page and its internal files in android?

    css how to stretch center div to fill allowable area

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to stop ReSharper removing spaces after css properties

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    Stop CSS & Jquery Slideshow from looping

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    How to move images in a grid box?

    How to spin an image horizontally with CSS

    How to place two canvases adjacent to each other and on top of a third one

    How to apply this effect to the last line of a text?

    How to remove dropdown active color in bootstrap 3.0?

    How can I group DIVs in my document so I can apply CSS to them?

    How can I place three block of contents in one line in a way that the middle block is always full width?

    How to override previous onClick css class change (jQuery)

    How to add a color overlay to a background image?

    How do I specify IE 11 specific css file?

    How to check if CSS is on an element? [closed]

    How to display a list in two rows?

    How to give equal width for all the fields in the form with validations?

    How to toggle between display:none and display:block

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How do you stop a single-page site from automatically scrolling when resizing the browser?

    How can i make the responsive design using CSS?

    bootstrap css how to resolve conflict

    How can I fix Buttongroup Dropdowntoggle-Buttons in Bootstrap?

    How read(get) css style value of a server-side div in code behind(not set)?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?