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>
Related
I've been trying to build an image slide show / carousel using jQuery, and came across colorbox which I thing is really good, and does things the way I want to.
I'm stuck with how to build a slide show of images when using the ajax method they have.
I have six images per item that i'd like to load from the server, and run as a slideshow / carousel just like you see them when you click on the first link on this page under Elastic Transition.
I've succeeded in getting the images to the script using ajax, but i don't end up with a slide show. How can I do this? I currently end up with all the images below each other, and no forward or backward buttons etc.
Can you help?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".ajax").colorbox();
});
</script>
</head>
<body>
<p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p>
</body>
</html>
ajax.html (pulls images and returns it to the script
<div>
<img class="gallery" src='/slide/content/ohoopee1.jpg'>
<img class="gallery" src='/slide/content/ohoopee2.jpg'>
<img class="gallery" src='/slide/content/ohoopee3.jpg'>
</div>
I just could not figure what to do more.
Desired
I would recommend using ajax to add the markup to your document, then assign and open Colorbox to those elements.
An example would be something like this:
<div id='pictures' style='display:none'></div>
<script>
$('.ajax').on('click', function(e){
e.preventDefault();
$.ajax(this.href, {
success: function(html) {
$('#pictures').html(html).find('img').colorbox({href: function(){
return this.src;
}, open:true});
}
});
});
</script>
Excuse my English.
I tried to use the jQuery Reel Plugin and it works perfectly on my html file.
<img src="DSCN0691.jpg" width="210" height="186"
class="reel"
id="image1"
data-images="fish/DSCN####.JPG|691..702">
But if I add the script through document.innerHTML, it doesn't work at all.
The image will show up, but I can't reel it.
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
I also tried the element.setAttribute(name, value) function,
or loaded the whole html file using jQuery.
But it turns out the same way...
Have no idea what to do now.
Or are there any other solution that I can show and hide the reel image dynamically ?
Thanks a lot.
Down here are the whole script and project.
JQuery Reel Project
<script language="JavaScript">
function WriteToFile(passForm) {
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
}
</script>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='jquery.reel.js' ></script>
</head>
<body>
<div id="Hello"></div>
<input type="button" value="submit" onclick="WriteToFile(this);">
<img src="DSCN0691.jpg" width="210" height="186"
class="reel"
id="image1"
data-images="fish/DSCN####.JPG|691..702">
</body>
The reel plugin is initializing all images with the class "reel" on document load. If you change the HTML Dom afterwards, you need to initialize the added image. You can do this by the following javascript instead:
$('#image').reel({
images: 'fish/DSCN####.JPG|691..702'
});
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
i am having some loading problems with my slider. http://www.novaprogramming.com Sometimes it loads, and sometimes it does not. I really do not know why.
Your site render like this
<img src="nivo/images/02.png" alt="">
Try the img tag like this
<img src="/nivo/images/02.png" alt="">
In your page remove this code
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
its not needed
I have used following portfolio files,
http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/
and have added prettyphoto in each image tab, but it's not working.
All the library includes are fine.
Here is the code snippet,
under script tag,
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
$("a[rel^='prettyPhoto']").prettyPhoto();
$('a[rel]').each(function() {
$(this).attr('rel', $(this).data('rel'));
});
});
and under body tag,
<li data-tags="Print Design" ><img src="assets/img/shots/1.jpg" alt="Illustration" /></li>
If I remove data-tags in li element, then it's working fine but it's also essential for portfolio functionality.
Please guide me for solution.
Thanks.
--
I changed from
$(document).ready(function(){
to
jQuery(document).ready(function($){
Now I am not getting that $("a[rel^='prettyPhoto']").prettyPhoto is not a function error but still lightbox is not coming.