WordPress.org

Ready to get started?Download WordPress

Forums

Jquery issues (3 posts)

  1. kantoi09
    Member
    Posted 4 years ago #

    I am using a theme that uses jquery carouself for the slider for the homepage. Originally it was used for showing three photos, but now I am trying to change it to 3 large photos with inner fade between them but I am not sure where to make those changes. I follow the directions that the designer gave use but it is not clear and it is not working. My site is http://www.journeyofablackearedkite.com/. here are his directions:

    Step 01) Find the "skin.css" file under the styles/jcarousel/atlantica/ folder. Inside this file are the style-sets for the three sliders on the template. (Large, Small, and Full Gallery). Find the gallery that you'd like to change (probably the first one listed, which is the homepage slider), and then find the lines that control the width of each listed element. You'll also need to remove the margin between each element, so I'll include this here too. There are three lines of code that you need to change: .jcarousel-skin-atlantica .jcarousel-item { /* width: 308px; ---- I AM COMMENTING THIS OUT SO WE CAN ALWAYS REVERT THE CHANGE LATER ---- */ width: 935px; height: 289px; background: #eee; } .jcarousel-skin-atlantica .jcarousel-item-horizontal { /* margin-right: 5px; ---- I AM COMMENTING THIS OUT SO WE CAN ALWAYS REVERT THE CHANGE LATER ---- */ margin-right: 0px; } .jcarousel-skin-atlantica .jcarousel-item-placeholder { background: #fff; color: #000; } .jcarousel-skin-atlantica .jcarousel-item { /* width: 308px; ---- I AM COMMENTING THIS OUT SO WE CAN ALWAYS REVERT THE CHANGE LATER ---- */ width: 935px; height: 289px; overflow: hidden; }
    In this example - the grayed out text is simply "commented out" - the browser won't read it as styling, but if you want to go back to 3 images per page, you have the code. The blue text is our changes. The peach is simply more code that happens to be in between the areas that you need to change. In summary, we are extending the width of each element to span the full width available, we are then adding a background color (for troubleshooting only), and removing the padding between elements.

    Step 02) Open up atlantica.js inside of the scripts folder. Scroll down to find the lines that control the slider:
    jQuery('#mycarousel'). jcarousel({ auto: 6, scroll: 1, wrap: 'last', animation: 'slow', initCallback: mycarousel_initCallback });
    All you need to do is add the "scroll:1," line and it will make the fix. Ultimately, this is telling the scroller that it should only scroll one unit when clicked. It will also affect the other scrollers... this is simply a reality of this script.

  2. ericnovak
    Member
    Posted 4 years ago #

    I had the exact same problem. Too bad nobody can figure out how to change this. I'll contact the designer and see if he can do anything.

  3. ericnovak
    Member
    Posted 4 years ago #

    Ok, contacted the designer and got an email back right away. Took a month for you to get your answer though :P

    In the folder called "Scaler" open the file "1024" and edit these lines to reflect the size of your image.

    I think the original size was 289px or something like that.

    .jcarousel-skin-atlantica .jcarousel-container-horizontal {width:860px !important;}
    .jcarousel-skin-atlantica .jcarousel-clip-horizontal {width:878px !important;}
    .jcarousel-skin-atlantica .jcarousel-item {width:935px !important; overflow: hidden;}
    .jcarousel-skin-atlantica .jcarousel-item a img {width:935px !important; overflow: hidden;}
    .jcarousel-skin-atlantica .jcarousel-item-horizontal {margin-right: 0px;}

    -Eric

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.