I installed Highslide in my website but it seems like it's not working.
I saved the Highslide folders into my website main folder and put this in the head of my HTML document:
<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css"/> <script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/'; </script>
But when i try to use the image zoom pop up code it doesn't work:
<a class="highslide" href="images/thumbstrip13.jpg" onclick="return
hs.expand(this)"> <img src="images/thumbstrip13.thumb.png" alt=""/>
</a>
The image doesn't pop up like it should but it simply open in another window. Where did I do wrong?
Related
I created a link to open pdf file in iframe on popup window as script below . In case that a link is not a pdf file, I want to it to display in popup a text "It's not a pdf file, click here to download" but it does not work.
/* intialize popup */
$('.iframe-popup').magnificPopup({
type: 'iframe',
gallery: {
enabled: true
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- manific popup cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js" integrity="sha512-+m6t3R87+6LdtYiCzRhC5+E0l4VQ9qIT1H9+t1wmHkMJvvUQNI5MKKb7b08WL4Kgp9K0IBgHDSLCRJk05cFUYg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" integrity="sha512-nIm/JGUwrzblLex/meoxJSPdAKQOe2bLhnrZ81g5Jbh519z8GFJIWu87WAhBH+RAyGbM4+U3S2h+kL5JoV6/wA==" crossorigin="anonymous" />
<a class="iframe-popup" href="https://www.mrs.org.uk/pdf/postcodeformat.pdf">listofpostalcodes.pd...pdf<p>not supported file</p></a>
<a class="iframe-popup" href="https://www.mrs.org.uk/pdf/postcodeformat.csv">listofpostalcodes.pd...csv<p>not supported file</p></a>
Please kindly help me. Thanks.
I am trying to call the specific link id #ext when page loads instead of clicking it manually to show the modal popup. However I am not able to achieve it. Can someone look into code and suggest a change?
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<img src="image.jpg" />
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
The above code works fine when I do click on the link on the page "Open Modal". I want it to be called when page is loaded to show popup auto.
JSfiddle
Just for reference I am using this to show a modal popup: https://jquerymodal.com/
From the documentation:
You can manually open a modal by calling the .modal() method on the element:
As such you just need to call the modal() method on $('#ex1') when the page loads:
jQuery(function($) {
$('#ex1').modal();
});
jQuery(function($) {
$('#ex1').modal();
});
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
<div id="ex1" class="modal">
<img src="image.png" />
</div>
<p>
Open Modal
</p>
I am working with pycco, and would like to embed a knowl, as part of the doc-html.
I am able to render doc-html directly if they are simply input as markdown comments.
ie #<div>hi<div> will correctly display in the doc-html.
I insert the javascript through the comments:
"""
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<link href="http://aimath.org/knowlstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://aimath.org/knowl.js"></script>
"""
However, when I insert a knowl anchor, <a knowl="/knowl/k1.html">knwl1</a>, the element opens/closes in the correct area; but, the contents of the linked html are not visible.
If I try styling the anchor (in some pycco-like manner) then the element spans the entire page and won't open or close in the right area. The html content doesn't display either.
<td class=docs>
<div class="octowrap">
<a class="octothorpe" href="#section-7">#</a>
</div>
<a knowl="/knowl/k1.html">knowli.</a>
</td>
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 trying to get this lightbox to work and I'm not quite sure what I'm missing.
My relevant code is as follows:
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<!-- Lightbox -->
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("img.comidas").lightBox();
});
</script>
</head>
The images are displyed in this manner:
<tr>
<td><img src="images/big-boss-adulto.jpg" width="118" height="170" class="comidas"/></td>
<td><img src="images/big-boss-cachorro.jpg" width="118" height="170" class="comidas"/></td>
<td><img src="images/eukanuba-adulto.jpg" width="118" height="170" class="comidas"/></td>
</tr>
(I'm only trying if the lightbox works on the first image)
The problem id the following, the lightbox gets stuck here (in the loading part):
Things I've checked and that I can infer:
All the js and css are correctly linked and exist
The javascript and styleshit of the lightbox are probable working correctly since:
The style seems to be the correct
When you click outside the image (or press esc) the lighbox disappears
Another thing I've checked was using load:
$(window).load(function() {
$("img.comidas").lightBox();
});
But the same problem seems to persist.
Try selecting the containing <a> element, instead of the image itself, for the lightbox() function.
You are targeting the wrong element in your JS. You need to target the anchor link around the image, rather than the image itself.