The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> bxslider script
cjr
post Aug 12 2014, 11:33 PM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 6-June 14
Member No.: 21,044



I am setting up this bxslider script: Examples | Responsive jQuery Slider | bxSlider


Where does this JS code go? (I believe I have all css and js files in the correct location)
JS:
$('.bxslider').bxSlider({
video: true,
useCSS: false
});






**I know where this goes**


HTML:
<!-- <script src="/js/plugins/jquery.fitvids.js"></script> must be included in the <head>
after the jQuery library, and before the jquery.bxslider.js file. See the source code
of this page for an example. -->


<ul class="bxslider">
<li>
<iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li><img src="/images/730_200/houses.jpg" /></li>
</ul>
The file jquery.fitvids.js (found in the plugins folder) must be called AFTER the jQuery library, and BEFORE the jquery.bxslider.js file. An example <head> could look like the following:


<head>
<!-- other stuff here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/plugins/jquery.fitvids.js"></script>
<script src="/js/jquery.bxslider.js"></script>
</head>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 13 2014, 03:28 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



The bxslider can be found here: http://bxslider.com/examples/video . (You forgot to post the link here.)

Place that js either directly in a script tag or in an external js file.

In either case, it needs to go inside the HEAD of the page, AFTER the three script files you should already place there, as shown above in the example.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cjr
post Aug 13 2014, 10:16 AM
Post #3


Novice
**

Group: Members
Posts: 22
Joined: 6-June 14
Member No.: 21,044



QUOTE(Frederiek @ Aug 13 2014, 03:28 AM) *

The bxslider can be found here: http://bxslider.com/examples/video . (You forgot to post the link here.)

Place that js either directly in a script tag or in an external js file.

In either case, it needs to go inside the HEAD of the page, AFTER the three script files you should already place there, as shown above in the example.



I have uploaded bxslider to this url: bxslider All js and css files are placed. Any error you can see for why it's not working? No syntax errors in Dreamweaver.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 14 2014, 03:59 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



No need to PM me, I'll see your replies in the thread.

Did you also read the readme.md file that came with the download?
It says you need jquery's ready() function, like this:
CODE
$(document).ready(function(){
    $('.bxslider').bxSlider({
        video: true,
        useCSS: false
    });
});

And I'd say you also need some DIVs around that UL list, so that it can be styled in CSS.
Classes are provided for that in the jquery.bxslider.css file. Maybe you need to adapt those to fit your slider size.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:56 AM