Problem editing Templates with easySlider

  •  06-08-2010, 2:18 PM

    Problem editing Templates with easySlider

    Hello,
     
    The best way I can describe this issue is that when editing a template that has a JavaScript slider, the html is exploded downward so the contents of each panel are layered overtop of the body of the page.
     
    Is there any possibility of adding support for "easySlider.js" as there are a lot of good templates at http://www.dreamtemplate.com which I use as my main supplier of templates (prefered over Template Monster as their code is really sloppy).
     
    EXAMPLE OF SCRIPT LOADED IN <HEAD>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/easySlider1.5.js"></script>
    <script type="text/javascript" charset="utf-8">
    // <![CDATA[
    $(document).ready(function(){
    $("#slider").easySlider({
    controlsBefore: '<p id="controls">',
    controlsAfter: '</p>',
    auto: true,
    continuous: true
    });
    });
    // ]]>
    </script>
    <style type="text/css">
    .gallery { float:right; width:333px; height:198px; margin:45px 67px 0 0; }
    #slider { margin:0; padding:0; list-style:none; }
    #slider ul,
    #slider li { margin:0; padding:0; list-style:none; }
    #slider li { width:333px; height:198px; overflow:hidden; }
    p#controls { margin:0; position:relative; }
    #prevBtn { display:block; margin:0; overflow:hidden; width:1px; height:1px; position:absolute; left:-34px; top:-133px; }
    #nextBtn { display:block; margin:0; overflow:hidden; width:1px; height:1px; position:absolute; left: 398px; top:-133px; }
    #prevBtn a { display:block; width:1px; height:1px; background:url(images/spacer.gif) no-repeat 0 0; }
    #nextBtn a { display:block; width:1px; height:1px; background:url(images/spacer.gif) no-repeat 0 0; }
    </style>

    EXAMPLE OF SCRIPT USAGE IN <BODY>
    <div class="gallery">
    <div id="slider">
    <ul>
    <li><img src="images/siple_img_1.jpg" alt="screen 1" width="333" height="198" border="0" /></li>
    <li><img src="images/siple_img_2.jpg" alt="screen 1" width="333" height="198" border="0" /></li>
    <li><img src="images/siple_img_3.jpg" alt="screen 1" width="333" height="198" border="0" /></li>
    <li><img src="images/siple_img_4.jpg" alt="screen 1" width="333" height="198" border="0" /></li>
    <li><img src="images/siple_img_5.jpg" alt="screen 1" width="333" height="198" border="0" /></li>
    </ul>
    </div>
    </div>

    ---------------------
    As you probably already know, jQuery is very common, so having the ability to execute inline javascript
    should be something worth at the very least looking into. The slide panel is something fairly common, and
    I believe given that Cute is primarily Javascript, adding the ability to run other javascripts
    (maybe limited) shouldn't be too much of an issue. Unfortunately, I don't know enough of the inner-workings
    of Cute to be able to add this support myself, so any assistance would definitely be appreciated.
    Thank you in advance

    Custom Software Developent at MicroVB INC
View Complete Thread