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>
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...
I have this script
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../lastfm.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#lastBox').lastplayed({
apikey: 'xxxxxxxxxxxxxxxxxxx',
username: 'myusername',
limit: 6,
refresh: 0
});
});
</script>
that affects this div:
<div style="float:right;">
<h3>Recent Tracks</h3> <img src="np.gif" alt="" />
<img src="np.gif" alt="" />
<img src="np.gif" alt="" />
<img src="np.gif" alt="" />
<font size="2"><div id="lastBox" class="lastfm"></div></font>
the script isn't mine, i've taken it from here.
Now the problem is, that the "refresh" function already exists, but i turned it off because it's buggy, while the entire page reload works fine. So I've searched for a reload jquery script, i found some, but they all require a target html or php page to reload, while i just want to reload the div. Possibly, cound you try to look at the javascript here or by downloading it from the source link, and fix the reload there to make it act like the entire page is reloading? I'm quite new to all this. Thanks
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'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!)