Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2967

    Where do I change the slide transitions? I want to change the diagonal blocks slide transition to the fullwidth slide fader. Please help! I am a graphic designer who knows basic web design.

    Thank you!

    #40071

    If you want to use the fullwidth slider just call the avialsider function without blocksize parameter. So instead of i.e.:

    $('#fading-top-curtain').aviaSlider({
    blockSize: {height: 40, width:'full'},
    });

    use:

    $('#fading-top-curtain').aviaSlider();

    #40072

    Can you tell me exactly where I need to put the code in order for it to work? And what file am I inserting the code into? Thank you!

    #40073

    Can you post a link to your website – I can give you better instructions then :)

    #40074

    I am trying to use the Avia slider on my homepage. My site isn’t fully developed yet, but when it is live, I will send you a link. The slide transition is minor and won’t stop me from designing the site.

    Thanks!

    #40075

    Ok. I am posting my “test” homepage in a test folder for now. I am trying to get the Avia Slider to work on my homepage and then I can just swap out the imagery with my own. I don’t need the button graphic to work underneath the slider. I am just trying to get the slider to fade in and out… Just a basic slideshow.

    http://www.alhdesigns.com/test/index.html

    #40076

    Just replace following code in index.html:

    <script type='text/javascript' src='js/custom.min.js'></script>

    with:

    <script type='text/javascript'>
    $(document).ready(function(){
    //activate the lightbox
    jQuery('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]').prettyPhoto({theme: "light_square"});
    // here you can see the slide options I used in the demo page. depending on the id of the slider a different setup gets activated
    $('#frontpage-slider').aviaSlider();
    });
    </script>

    This change will remove the block fading effect…

    #40077

    Hey Dude, I’ve got another question.

    I see on the Avia Slider demo page, that “?slider=droping-curtain” is used to reload the page and use the dropping curtains. That’s cool that a change can be made quickly, but I want to start with a different transition (i.e. the dropping curtains instead of the blocks) but I ‘cant attach the “?slider=droping-curtain” to the main.html in my php file.

    Is there an easy way to call for a specific transition right from file that calls the scripts and has the unordered list?

    http://dragonsflight.biz/azscia/normal_index.php

    #40079

    Yes, you can use any of the default transitions. Actually I wouldn’t include the entire demo data like you did ( http://dragonsflight.biz/azscia/js/custom.js ) but I’d just call the code for the droping-curtain transition. Delete the entire code in custom.js and replace it with:

    $(document).ready(function(){

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

    // here you can see the slide options I used in the demo page. depending on the id of the slider a different setup gets activated
    $('#frontpage-slider').aviaSlider({ blockSize: {height: 'full', width:40},
    display: 'topleft',
    transition: 'drop',
    betweenBlockDelay:80,
    animationSpeed: 800,
    switchMovement: true,
    slideControlls: 'items',
    appendControlls: '.aviaslider'
    });

    });

    If you’re not familiar with the slider settings please have a look at the documentation which explains all available settings/parameter. An online version can be found here: http://www.udel.edu/ocm/development/db/igs-aviaslider/aviaslider-jquery-slideshow/documentation_html/#javascript

    #40080

    Thanks Dude, that worked perfectly. I also appreciate your helping me understand the js a little better.

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

The topic ‘AviaSlider slide transitions’ is closed to new replies.