I'm not used to work with jQuery, but I thought to use the easyslider for showing some pictures on my website.
The problem is that I get this error: $("#slider").easySlider is not a function
I don't know what I have done wrong, because if I open the page alone, there is no problem, but when I place the file back between others it won't work.
Here's my code :
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<div class="block">
<div class="m950 flb">
<div id="slider" style="position:relative; width:947px; height:615px; left:-20px; top:-3px; overflow:hidden;">
<ul>
<li><img src="/images/slideshow/1.jpg" /></li>
<li><img src="/images/slideshow/2.jpg" /></li>
<li><img src="/images/slideshow/3.jpg" /></li>
<li><img src="/images/slideshow/4.jpg" /></li>
<li><img src="/images/slideshow/5.jpg" /></li>
<li><img src="/images/slideshow/6.jpg" /></li>
<li><img src="/images/slideshow/7.jpg" /></li>
<li><img src="/images/slideshow/8.jpg" /></li>
<li><img src="/images/slideshow/9.jpg" /></li>
<li><img src="/images/slideshow/10.jpg" /></li>
</ul>
</div>
</div>
</div>
Does someone know what I could do to make it work, because I've been braking my head for this problem.
Thank you so much in advance!
Try this:
<script type="text/javascript">
( function($) {
// we can now rely on $ within the safety of our “bodyguard” function
$(document).ready( function() {
$("#slider").easySlider({
auto: true,
continuous: true
});
} );
} ) ( jQuery );
</script>
It's a way around it.
It sounds like you may be moving the file around and have broken the reference paths to your javascript files.
if I open the page alone, there is no problem, but when I place the
file back between others it won't work.
If you view page source and click on the link to your javascript file, does it load? If not then the path is wrong. If you post more information about your directory structure then someone may be able to help you out with that. Or you could just use a full path instead of your relative path.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider1.7.js"></script>
<script type="text/javascript" src="http://mysite.com/js/jquery.js"></script>
<script type="text/javascript" src="http://mysite.com/js/easySlider1.7.js"></script>
You are probably loading jQuery twice as you add the page you showed to your main page. Double check jquery is not loaded in your <head> section.
In case it is happening, keep the loading in only one place, i.e. if the slider is only needed in this specific page but jQuery is needed application wide, then keep jQuery loading in your <head> and leave easySlider loading in that page. (but don't forget to load jquery only once!)
Related
I'm currently trying to implement lightbox onto my website, but I cannot get it to work, I don't think there is anything conflicting with it, and I have placed all of the files in the correct locations and linked them how it tells you to on the lightbox 2 website. (http://lokeshdhakar.com/projects/lightbox2/)
Just to double check:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
is in the head tags,
<script src="js/lightbox.js"></script>
Is at the bottom of the page, just before the closing body tag.
lightbox.css is in the css directory
lightbox.js is in the js directory
<li><img src="images/1.png" data-lightbox="image-1" /></li>
and above is what all of my image tags look like.
I'm unsure why it isn't working. I have the files uploaded to a server, and it doesn't work on there either.
Thanks in advance
The problem is that you're using an img tag, and they explicity say to use an anchor a one.
For me, it's working like a charm:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css" rel="stylesheet" />
<ul>
<li>
Cute baby panda
</li>
<li>
Another
</li>
<li>
Last one
</li>
</ul>
The documentation says to use <a> (anchor tag) to trigger the lightbox.
<li>
<a href="images/1.png" data-lightbox="image-1">
<img src="images/1.png" />
</a>
</li>
I have an image slider in my webpage. The slider is made according to the code in the below link.
http://www.htmldrive.net/items/show/37/Dot-Slider-simple-easy-to-use-images-slideshow-jquery-plugins
I have a CSS class and the whole code looks like this.
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#demo2").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_window_width: '256',
slideshow_window_height: '256',
slideshow_title_color: '#FFF',
soldeshow_foreColor: '#999',
});
});
</script>
</head>
<body>
<div class="ads2">
<div id="demo2" class="webwidget_slideshow_dot">
<ul>
<li><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
I have a CGI scripts using Perl that runs for 5 minute. But the javascript is not working for these 5 minutes and image allignment is not clear during this time. After the page is loaded the javascript works fine. However the Javascript part is working fine because I have tested with an alert in javascript code and it works at the start of the page. The problem is when I call the Javascript using div it does not works.
$(/*code*/) is a shortcut for ready() which means that the code in $(/*code*/) won't be executed until the HTML document has been loaded.
Is the 5 minute page load time is for some omitted content after your #demo2 div but before the closing body tag?
The fact that you have wrapped your function in $(...) means it won't be invoked until the entire DOM (Document Object Model) is loaded, parsed and ready.
One thing to try would be to move that script block into the body of the html, after the #demo2 div. Also remove the "$(function() {" wrapper from the code. Not familiar enough with the slideshow widget you are trying to use to know if it will work without the entire DOM being ready, though...
Intro:
This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie.
What I want to know:
I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed.
What I have done before I came to StackOverflow:
Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image.
Sources:
This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html.
This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/ - on the Lightbox Gallery section.
HTML Structure I have tried, and failed:
<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
</head>
<body>
<div class="popupgallery">
<img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popupgallery').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Note:
I also tried putting the .js files before </body>, again, to not producing intended results.
I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.
I hope someone out there would be kind enough to help me with this query.
Relevant queries:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
Thanks again! I would really appreciate your thoughts!
Just add delegate: 'a' to your jquery function and make sure the img tag contains the full res image while the href contains the thumbnail.
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
Try putting "http:" before backslashes for the .js file source. Also try to use the new version of jQuery, like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
I am a complete beginner to website design and I am trying to create a more modern website for my company. The current one is less than glamorous (Greenlite.co.uk).
After spending a lot of time trying to make a Flash banner for the homepage it occurred to me that Flash is probably quite outdated and not view able from all platforms. This is when I came across the BxSlider, and it really looks great! If only I could get it to work on my site.
I am using CoffeeCup Visual Site Designer, I then used the 'Add HTML' tool. Into the 'Insert HTML' window I have placed as follows;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
<li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>
</ul>
<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>
I have followed, as well as I could, the instructions shown on bxslider.com. I downloaded the package from bxslider, adding the files to coffeecup and linking the location in the script. I also added my images to CoffeeCup and wrote in their location.
When I preview my website I am rewarded with my three images all shown at once, each underneath the other, with a mouse over caption. Alongside the images are a bullet point.
What I am trying to achieve is a Bxslider with auto start, displaying stop/start controls and with captions.
I have attempted many variations, the script I have shown being my original attempt.
The closest I have got to a working Bxslider is by copying code I found from a website for the old version bxslider. This gave me an image slideshow with headers. If I tried to edit the code to my specifications then it would take me back to square one.
I am entirely aware that I am likely to be making a very obvious mistake. However, to the untrained eye it's giving me nothing but headaches. Any help would be largely appreciated.
The Javascript you've got is invalid. Try changing the Javascript to:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
See working jsfiddle - http://jsfiddle.net/FLuRH/
i noticed some thing that might be a problem:
You didn't closed some code part properly
This is yours:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
This is mine:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'true',
auto: 'true',
autoControls: 'false',
});
});
</script>
Also i put this code part in the "head" section and it worked.
Give it a try.
I hope i helped somehow.
Here is working code(just create new html file where u extract bxslider folder)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(".bxslider").bxSlider();
});
</script>
</head>
<body>
<div style="width:700px;height:250px;align:center;padding-left:250px;">
<ul class="bxslider">
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
</ul>
</div>
</body>
</html>
I'm trying to setup PhotoSwipe (http://www.photoswipe.com/) which is a photo gallery jquery plugin which is compatible with mobile devices. But I'm having trouble implementing the plugin! I've gone through each line I was supposed to add but the plugin's not functioning at all. The images link fine obviously, but the plugin doesn't work the way that it should. I think missing something but I don't know what.
I'm relatively new to jQuery and I honestly don't know how anything works, I only know how to plug things in.
I've checked the file paths and everything seems to be pointed to the right place.
Here's my code.
in 'head' tag
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$("#gallery a").photoSwipe(options);
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
in 'body' tag
<ul id="gallery">
<li><img src="img/events/01t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/02t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/03t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/04t.jpg" rel="external" alt="" /></li>
<li><img src="img/events/05t.jpg" rel="external" alt="" /></li>
</ul>
Oh. Actually the link to jQuery needs to come before the link to photoswipe.
So your script files should show like this:
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"></script>