Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3184

    I have implemented the avia slideshow into my website but I appear to be getting some strange results. I have div’s which I would like to use as the content, these include text and images. The first div loads fine, but subsequent div’s only the image is loaded, it repeats across the main div, then when the slideshow reaches the beginning the first div is loaded correctly.

    HTML:

    Code:
    <section id=”slide-scroll” class=”aviaslider”>
    <div class=”items”>

    <div class=”featured”>
    <div class=”stats”>
    <h5>Born</h5>
    <h4>05.03.1976</h4>
    <h5>Drinks</h5>
    <h4>Tea 1 Sugar</h4>
    <h5>Lives</h5>
    <h4>Garstang</h4>
    <h5>Hates</h5>
    <h4>The M25</h4>
    <h5>Loves</h5>
    <h4>Test Matches</h4>
    <h5>Mobile</h5>
    <h4>07751 692 243</h4>
    </div>
    <div class=”mugshot”>
    Pete
    </div>
    </div>

    <div class=”featured”>
    <div class=”stats”>
    <h5>Born</h5>
    <h4>05.03.1976</h4>
    <h5>Drinks</h5>
    <h4>Tea 0 Sugar</h4>
    <h5>Lives</h5>
    <h4>Brinscall</h4>
    <h5>Hates</h5>
    <h4>Mopeds</h4>
    <h5>Loves</h5>
    <h4>Talking</h4>
    <h5>Mobile</h5>
    <h4>07793 674 147</h4>
    </div>
    <div class=”mugshot”>
    Keith
    </div>
    </div>

    <div class=”featured”>
    <div class=”stats”>
    <h5>Born</h5>
    <h4>03.06.1975</h4>
    <h5>Drinks</h5>
    <h4>Coffee</h4>
    <h5>Lives</h5>
    <h4>Preston</h4>
    <h5>Hates</h5>
    <h4>Washing Up</h4>
    <h5>Loves</h5>
    <h4>Gadgets</h4>
    <h5>Mobile</h5>
    <h4>07968 118 029</h4>
    </div>
    <div class=”mugshot”>
    < img src=”images/mugshots/pete.png” alt=”Steve” />
    </div>
    </div>

    </div>

    </section>

    JS:

    Code:
    $(‘.items’).aviaSlider({
    blockSize: {height: 40, width:’full’},
    display: ‘topleft’,
    transition: ‘fade’,
    betweenBlockDelay:150,
    animationSpeed: 600,
    switchMovement: false,
    appendControlls: ‘.names’
    });

    I have amended jquery.aviaSlider.js – slides: ‘div’.

    You can see the issue here: http://www.marchdesignstudio.co.uk/test/profile.html

    Any help / advice would be very much appreciated.

    #41103

    Hey,

    I think the problem is that Aviaslider doesn’t support html/div content at the moment. I couldn’t find any hint on how to use avaslider with div content (neither on the demo page here: http://aviathemes.com/aviaslider/ nor in the docs). It’s possible to wrap images into divs or use them as list elements but you can’t display html/div/text content…

    #41104

    Ahh ok… that puts my mind at rest now. Thanks!

    #41105

    Hi!

    I was looking for this same option and couldn’t find it either…

    So I modified jquery.aviaSlider.js by adding a new function ‘addSlideContent’ and option ‘overlayContent’

    ‘overlayContent’ can be set to ‘text’ to use the default method of reading text from the alt tag and placing it on top of the slide.

    ‘overlayContent’ can also be set to ‘html’ which reads an id from the alt tag.

    The ‘addSlideContent’ function looks for an element with the matching id and places it inside the slide show on top of the image slide.

    And it works great!

    I can pass the code along to you guys at support if you like …

    #41106

    Hey,

    that would be great because everyone can profit from it. You can use a service like http://pastebin.com or send it to: (Email address hidden if logged out)

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

The topic ‘AviaSlide issues’ is closed to new replies.