I have HTML which includes scripts in following order
<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">
and images are tied to div as
<div id="slideshow">
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
</div>
where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.
To me it seems correct order as well. What my app.js does is
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another
What is that I am not doing right here??
You forget some div classes.
You can find a jsfiddle example I put in place here : http://jsfiddle.net/rNF8G/
EDIT 1:
You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play");
See my edit here : http://jsfiddle.net/rNF8G/1/
EDIT 2:
To remove pagination, all you have to do is to add the following property :
generatePagination: false
You can see it in the following update : http://jsfiddle.net/rNF8G/117/
Instead of this...
$(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
try this...
$(document).ready(function(){
$('#slides').slides({
width: 600,
height: 120,
pagination: false,
previous: false
});
$('#slides').slides("play");
});
You don't seem to be attaching the handler correctly to the document ready event
If that doesn't work, can you provide a jsfiddle?
Try with JQuery Cycle: http://jquery.malsup.com/cycle/
HTML
<div id="slides">
<img src="../static/img/slideshow/01.JPG">
<img src="../static/img/slideshow/02.JPG">
<img src="../static/img/slideshow/03.JPG">
<img src="../static/img/slideshow/04.JPG">
<img src="../static/img/slideshow/05.JPG">
<img src="../static/img/slideshow/06.JPG">
</div>
JQuery
$('#slides').cycle({
fx: 'scrollRight',
speed: 'slow',
timeout: 5000
});
Related
I'm really new to coding especially JavaScript..
I can't seem to get Owl Carousel to work :(
when I'm saving my main.js file in Brackets I get a few errors:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
The Errors:
$' was used before it was defined. $(document).ready(function(){
1
Expected exactly one space between 'function' and '('. $(document).ready(function(){
1
Expected exactly one space between ')' and '{'. $(document).ready(function(){
1
Missing space between ')' and '{'. $(document).ready(function(){
2
Missing 'use strict' statement. $(".owl-carousel").owlCarousel();
I'm about to go crazy because I've included everything right and I don't have a fing clue what the errors mean...
here's my index.html
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Please help, thanks :)
First of all please remove 2.2.4 and 1.12.4 jquery libraries. Secondly for main.js. Follow this code.
$(".owl-carousel").owlCarousel({
responsiveClass: true,
dots: true,
dotsContainer: false,
loop: true,
autoWidth: true,
autoplay:true,
nav:true,
smartSpeed:1000,
items:4,
responsive: {
0: {
items:1,
margin: 250,
center: true
},
768: {
items:3,
margin:200,
center: false
},
992: {
items:3,
margin: 350,
center: true
},
1200: {
items:3,
margin:350,
center: true
},
},
});
Add following CSS
.owl-nav {
text-align: center;
}
Then add owl.carousel.min.css in the style sheet
https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css"
Demo link for working Responsive Owl Carousel at JSFiddle
You can add customise CSS and add changes accordingly. Please refer Owl Carousel Documentation here
I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.
As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.
Please help to resolve the isse and let me know if more detail is required.
Sorry I tried to add the html, css and jquery code but i was encountering error.
Can you please suggest how what changes I should make to the js : slides.min.jquery.js
so that it renders my second slider with css content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/text.css">
<script src="js/slider/jquery.min.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script src="js/slider/slider.text.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides 1
$('#slides1').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
// Initialize Slides 2
$('#slides2').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<div id="container">
<div id="example">
<div id="slides1">
<div class="slides_container">
<div class="slide">
<img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">
<div class="tmpSlideCopy">
<h1>A History of Innovation</h1>
<p>SLIDE 1 </p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Second Slide</h1>
<p>Slide 2</p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Third Slide</h1>
<p>Slide 3</p>
</div>
</div>
</div>
<img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
<img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next">
cheers
pam
You can try this below code.
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Where container is the "css" style.
.slides_container {
width:570px;
height:270px;
}
More information on various property and styling at http://slidesjs.com/#docs
My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden;
I`m use last solve
Another solution would be to allow bxslider to load, then hide it once it has.
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>
I have searched for 3 days the web to find a solution to my simple problem.
I try to run the pause function in a external <a> tag from this script: http://www.twospy.com/galleriffic/js/jquery.galleriffic.js
pause: function() {
this.isSlideshowRunning = false;
if (this.slideshowTimeout) {
clearTimeout(this.slideshowTimeout);
this.slideshowTimeout = undefined;
}
I tried something like this: pause
edit: whole script:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>
<body>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<a id="sstop" href="#">pause</a> <!--here the link-->
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
...
</ul>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
var galleryswtch=0;
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
//$('div.content').css('display', 'none');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 3,
preloadAhead: 10,
enableBottomPager: true,
maxPagesToShow: 11,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.animate({opacity: '0'}, 500, 'linear', callback);
},
onPageTransitionIn: function() {
this.animate({opacity: '1'}, 500, 'linear');
}
});
$('#sstop').click(function() {$('#gallery').galleriffic('pause');}); //here the js
});
</script>
</body>
As Galleriffic is a jQuery extension that acts on DOM elements it should be:
$(myselector).galleriffic("pause");
where myselector is a reference to whichever element has had the gallery attached to it [e.g. '#thumbs' if you're using the same element IDs as in the Galleriffic examples.]
Ideally, make this association in your JS files rather than doing it inline in the HTML by first giving your link and ID:
Pause
and then:
$(document).ready(function() {
// do all of the rest of your galleriffic setup
$('#thumbs').galleriffic(
// initial options
);
// and then link the pause link with the gallery
$('#pause_link').click(function() {
$('#thumbs').galleriffic('pause');
});
});
[rationale - in modern HTML putting your Javascript inline is considered "olde worlde"]
To invoke a function with no parameters (such as this one), you should call it like pause().
try this
yourobjectname.pause();
Any reason why
$('#myElement').delay(2000)
wont work?
or is it pausing for undefined time?
if so just make a new function and call it on your a.click event :)
Here's the source, am I missing something?
I tried it here, and it works, but on my PC it's not working.
--EDIT
I used jquery min v1.4.1, it didn't work, so I downloaded latest version, still not working, on the link I used google's jquery SDN which is v1.5.1.
<html>
<head>
<title>Test</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#bio > div').hide();
$('#bio > div:first').show();
});
$('#bio h3').click(function() {
alert('called');
$(this).next().animate(
{'height':'toggle'}, 'slow', 'swing'
);
});
$('p:first').animate(
{
height: '+=100px',
backgroundColor: 'green'
},
{
duration: 'slow',
easing: 'swing',
complete: function() {alert('done!');},
queue: false
}
);
</script>
</head>
<body>
<div id="bio">
<h2>Who’s Hot Right Now?</h2>
<h3>Beau Dandy</h3>
<div>
<img src="../images/beau_100.jpg" width="100"
height="100" alt="Beau Dandy"/>
<p>Content about Beau Dandy</p>
</div>
<h3>Johnny Stardust</h3>
<div>
<img src="../images/johnny_100.jpg" width="100"
height="100" alt="Johny Stardust"/>
<p>Content about Johny Stardust</p>
</div>
<h3>Glendatronix</h3>
<div>
<img src="../images/glenda_100.jpg" width="100"
height="100" alt="Glendatronix"/>
<p>Content about Glendatronix</p>
</div>
</div>
</body>
</html>
I think your document.ready was being closed too soon.
I simply moved the brackets }); to the end of your script...
<script type="text/javascript">
$('document').ready(function() {
$('#bio > div').hide();
$('#bio > div:first').show();
$('#bio h3').click(function() {
alert('called');
$(this).next().animate(
{'height':'toggle'}, 'slow', 'swing'
);
});
$('p:first').animate(
{
height: '+=100px',
backgroundColor: 'green'
},
{
duration: 'slow',
easing: 'swing',
complete: function() {alert('done!');},
queue: false
}
);
});
</script>
Why? For example, you're trying to bind events like .click() to an element called #bio h3. However, the element #bio h3 might not yet even exist yet in the DOM since you're calling the script in the <head>. Using document.ready ensures the DOM exists before executing the code within.
Why it works in some browsers is likely a simple timing issue.