Welcome to TalkGraphics.com
Results 1 to 10 of 11

Hybrid View

  1. 02 April 2012, 06:46 PM #1
    Mgd1138
    Mgd1138 is offline Member
    Join Date
    Apr 2011
    Location
    Republic of Immigrants
    Posts
    53

    Default Trouble Adding JQuery Slider to Test Page

    Good day,

    I downloaded a slick jquery slider for a web page and was having quite a bit of trouble adding it in. I was trying the "Banner Rotator" version which is 1150x400 based on the demo. Would look great on my site "if" I had a clue.

    Confused...

    Appreciate anyone's insight.

    Cheers.
    Attached Files Attached Files
    Reply With Quote Reply With Quote IP
  2. 03 April 2012, 12:21 PM #2
    Pixelpusher's Avatar
    Pixelpusher
    Pixelpusher is offline Member
    Join Date
    Feb 2010
    Location
    Georgia, USA
    Posts
    286

    Default Re: Trouble Adding JQuery Slider to Test Page

    You will have to add this using placeholders. If there is code to be placed in the head, then you will have to do that, along with uploading all of the css, img and js folders to your server. One of the best ways to see how the author of this slider created it is to open the html documents that are included in a text editor (I use and prefer TextPad 5) I did something like this with an accordion here: http://ntunemusic.com

    It looks like this was done with an unordered list or ul:

    <!DOCTYPE html>
    <html class="no-js" lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>RoyalSlider Demo</title>


    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">


    <link rel="stylesheet" href="css/royalslider.css" />
    <link rel="stylesheet" href="css/royalslider-skins/default/default.css" />
    <link rel="stylesheet" href="css/royalslider-skins/iskin/iskin.css" />

    <link rel="stylesheet" href="css/royalslider-preview.css" />



    <!-- preview-related stylesheet -->
    <link rel="stylesheet" href="css/royalslider-preview.css" />



    <script src="js/jquery-1.6.2.min.js"></script>
    <script src="js/jquery.easing.1.3.min.js"></script>
    <script src="js/royal-slider-8.1.min.js"></script>


    </head>
    <body>
    <div id="main-body">
    <h1>RoyalSlider Demo: Banner Rotator</h1>
    <div id="slider-ajax-container">
    <div id="banner-rotator" class="royalSlider default">
    <ul class="royalSlidesContainer">
    <li class="royalSlide">
    <img class="royalImage" src="img/1150x400/6.jpg" width="1150" height="400"/>
    <div class="royalCaption" style="left:58%; text-align:center; color:#33383e; width:315px; top: 110px;">
    <div class="royalCaptionItem" data-show-effect="fade movetop" data-move-offset="15" style="width: 100%;">Animated Blocks</div>
    <div class="royalCaptionItem sgMidText" data-show-effect="fade movetop" data-move-offset="8" style="top:35px; width: 100%;">with Custom Effects for Each Item</div>
    <div class="royalCaptionItem sgSmallText " data-show-effect="fade movetop" data-move-offset="8" data-delay="600" style="top:70px; left: 96px;"><a class="tintButton non-draggable" href="javascript:void()">Button Example</a></div>
    </div>
    </li>
    <li class="royalSlide">
    <img class="royalImage" src="img/1150x400/7.jpg" width="1150" height="400"/>
    <div class="royalCaption" style="left:57%; top:65px; color:#b93;">
    <div class="royalCaptionItem" data-show-effect="moveleft fade" data-move-offset="30" style="width: 280px;">Drag Navigation</div>
    <div class="royalCaptionItem sgMidText" data-show-effect="moveleft fade" style="left: 120px; top:35px; width: 200px;" data-move-offset="30">with Mobile Support</div>
    </div>
    </li>
    <li class="royalSlide">
    <img class="royalImage" src="img/1150x400/8.jpg" width="1150" height="400"/>
    <div class="royalCaption" style="left:40%; top:130px; width:300px; color: #eaeaed;">
    <div class="royalCaptionItem " data-show-effect="fade moveleft" data-move-offset="30" style="left: -320px;">Autoplay Slideshow</div>
    <div class="royalCaptionItem sgMidText" data-show-effect="fade moveright" data-move-offset="20" style="left: -200px; top: 30px;">with Pause on Hover</div>
    </div>
    </li>
    <li class="royalSlide">
    <img class="royalImage" src="img/1150x400/12.jpg" width="1150" height="400"/>
    <div class="royalCaption" style="left:40%; top:120px; width:400px; color: #4e4c39; text-align:center;" >
    <div class="royalCaptionItem " data-show-effect="fade movetop" data-move-offset="10" style="left: -320px; width: 100%;">Smart Lazy-Loading</div>
    <div class="royalCaptionItem sgMidText" data-show-effect="fade movebottom" data-delay="400" data-move-offset="5" style="left: -320px; top: 35px; width: 100%;" >Preloads Nearby Images After Current</div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <pre><code>
    jQuery(document).ready(function($) {
    $('#banner-rotator').royalSlider({
    imageAlignCenter:true,
    hideArrowOnLastSlide:true,
    slideSpacing:20
    });
    });
    </code></pre>
    <script>
    jQuery(document).ready(function($) {
    $('#banner-rotator').royalSlider({
    imageAlignCenter:true,
    hideArrowOnLastSlide:true,
    slideSpacing:20
    });
    });
    </script>
    </body>
    </html>
    Reply With Quote Reply With Quote IP
  3. 03 April 2012, 03:01 PM #3
    gwpriester's Avatar
    gwpriester
    gwpriester is offline Moderator Emeritus
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,522

    Default Re: Trouble Adding JQuery Slider to Test Page

    How does the member do this?

    How does the member add the images?

    I think this is very daunting to anyone who does not understand placeholders and scripts.
    Gary W. Priester
    Mr. Moderator Emeritus Dude    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
    Reply With Quote Reply With Quote IP
  4. 03 April 2012, 03:08 PM #4
    bb2
    bb2 is offline Xara Staff Member
    Join Date
    Jan 2004
    Posts
    1,830

    Default Re: Trouble Adding JQuery Slider to Test Page

    Why not use on of the sliders provided within the program? Design Gallery > Page Elements > Photos > Photo slideshows
    Reply With Quote Reply With Quote IP
  5. 03 April 2012, 04:38 PM #5
    gwpriester's Avatar
    gwpriester
    gwpriester is offline Moderator Emeritus
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,522

    Default Re: Trouble Adding JQuery Slider to Test Page

    Good point bb2. Especially if all the script makes your head spin.

    Designs Gallery > Widgets > Eyecatcher Widgets.

    Have a look at Sliding Slide Show.
    Gary W. Priester
    Mr. Moderator Emeritus Dude    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
    Reply With Quote Reply With Quote IP
  6. 03 April 2012, 07:43 PM #6
    Pixelpusher's Avatar
    Pixelpusher
    Pixelpusher is offline Member
    Join Date
    Feb 2010
    Location
    Georgia, USA
    Posts
    286

    Default Re: Trouble Adding JQuery Slider to Test Page

    You basically add the head code which points to the javascript files, css, etc, and then you copy and paste the ul info into a placeholder and then change the photo links to your own (which should reside in the image folder that came with the script.) Then upload all of these files to your server. It is a lot of work but these things look amazing when compared to the ones that Xara offers (sorry guys but it's true.)
    Reply With Quote Reply With Quote IP
 

 
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Powered by vBulletin® Version 4.2.2
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.
© 2018 Xara Group Ltd
All times are GMT. The time now is 11:02 AM.