Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #5543

    Hello,

    No matter what I try, I can’t seem to get he border to not show up on my Avia Slider install. Here is my page: http://216.17.245.120/html/

    I am using the UL Class, but I can’t seem to figure out the Div Class. When I use that syntax it won’t slide for me.

    Can someone help me with this?

    Thanks!

    -JS

    #50783

    Hey,

    try to add following codeto one of your stylesheets:

    .aviaslider img, .aviaslider a img, .aviaslider a{
    color: #fff !important;
    }

    #50784

    Hi,

    Thanks for the prompt response. For some reason, now the images don’t load, here is the code I have on the page now:

    <div class=’aviaslider’ id=”frontpage-slider”>

    <div class=”featured”></div>

    <div class=”featured”></div>

    <div class=”featured”></div>

    </div>

    Here is the Stylesheet:

    /************************************************************************

    -) Slider: only the following lines are necceassary for slider styling,

    rest of the css file styles the demo page

    *************************************************************************/

    .aviaslider{

    height:200px; /*this changes the height of the image slider*/

    width:1200px;

    overflow: hidden;

    position: relative;

    background: #fff url(../images/layout/preload.gif) center center no-repeat;

    }

    .aviaslider img, .aviaslider a img, .aviaslider a{

    color: #fff !important;

    }

    .aviaslider li, .aviaslider .featured{

    display: block;

    width:100%;

    height:100%;

    position: absolute;

    top:0;

    left:0;

    z-index: 1;

    }

    .js_active .aviaslider li, .js_active .aviaslider .featured{

    display:none;

    }

    .aviaslider img, .aviaslider a img, .aviaslider a{

    border:none;

    text-decoration: none;

    }

    Is there something I am missing?

    Thanks!

    -JS

    #50785

    CORRECTION:

    I got the opening image to display, but it doesn’t slide:

    <div class='aviaslider' id="diagonal-blocks">
    <div class=".featured"><a href="images/slides/slide1.jpg" title=""><img src="images/slides/slide1.jpg" alt="" /></a></div>
    <div class=".featured"><a href="images/slides/slide2.jpg" title=""><img src="images/slides/slide2.jpg" alt="" /></a></div>
    <div class=".featured"><a href="images/slides/slide3.jpg" title=""><img src="images/slides/slide3.jpg" alt="" /></a></div>
    <div class=".featured"><a href="images/slides/slide4.jpg" title=""><img src="images/slides/slide4.jpg" alt="" /></a></div>
    </div>

    The URL is at: http://216.17.245.120/html/

    Thanks!

    -JS

    #50786

    Open up the custom.js file, delete the whole content and insert following code instead:

    jQuery(document).ready(function(){

    //activate the lightbox
    jQuery('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]').prettyPhoto({theme: "light_square"});

    jQuery('#diagonal-blocks').aviaSlider({
    blockSize: {height: 80, width:80},
    transition: 'slide',
    display: 'diagonaltop',
    switchMovement: true
    });

    });

    You can add, remove or change the parameters (transition, etc.) if you like :)

    #50787

    Sorry, this also didn’t work. I tried replacing the entire file as well as adding it into the custom.js file and nothing. Only the first image appears and then it never transitions.

    To be clear, all I want is the image to transition with no border around it or no space.

    Thanks!

    -JS

    #50788

    Can you send me the ftp login data to: (Email address hidden if logged out) – I’ll install the modified custom.js file.

    #50789

    Hello,

    Did you get my last response? I e-mailed it, basically check out this site, I want there to be no space around the image:

    http://216.17.245.120/html/

    FTP is the same if you want to go in and check it out.

    Thanks,

    -JS

    #50790

    Hey,

    Dude is currently away for 9 more days, if you just want to remove the border you can just change:

    <table width="1200" height="200" cellspacing="0" cellpadding="0" border="1">

    to

    <table width="1200" height="200" cellspacing="0" cellpadding="0" border="0">

    I’m uncertain if it is as easy as this since I don’t know how the code is output, I don’t have these files. I’ll ask Kriesi.

    #50791

    Hello,

    I can wait, it’s not just removing the table border. When I use the

      it will slide as it should but unfortunately it leaves an open space. I can’t make it to work with just using the <div> tags.

    Anyway, please let him know when he gets back and if he can help me.

    Thank you!

    -JS

    #50792

    I created an example with a div. I’m not familiar with table coding :)

    #50793

    Can you send it to me please?

    Thanks!

    -JS

    #50794

    The example code is:

    <div style="margin:auto; border: 1px solid #000;width:1200px;height:200px;">
    <ul class='aviaslider' id="diagonal-blocks" style="margin:0;">
    <li class="featured"><img src="images/slides/slide1.jpg" alt="" /></li>
    <li class="featured"><img src="images/slides/slide2.jpg" alt="" /></li>
    <li class="featured"><img src="images/slides/slide3.jpg" alt="" /></li>
    <li class="featured"><img src="images/slides/slide4.jpg" alt="" /></li>
    </ul>
    </div>

    (of course css styles would be better than inline styles). I added the code to: http://216.17.245.120/html/

    #50795

    Thank you very much… Looks great! Let me try it out for sure…

    Thanks again,

    -JS

    #50796

    Glad that I could help you :)

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Avia Slider No Border’ is closed to new replies.