Colorbox doesn't open on second click - javascript

I have strange problem with colorbox, the code I have is like:
<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-min.js"></script>
<img
src='/someimage.jpg' height="100px" width="100px"
onclick='$.colorbox({inline:true, href:"#inline_content"});' />
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
Some test inline
</div>
</div>
So, first time I click, it fades the page and opens me hidden content as popup, but when I close that popup, then click on the image again, second and all further times, it just fades the page, but doesn't show me popup with hidden content. What it could be? Appreciate any help. Thanks!

Found the problem, I used minified version
<script src="jquery.colorbox-min.js"></script>
when I changed to normal version
<script src="jquery.colorbox.js"></script>
it started to work.

Related

How to open a modal on an element when the page loads?

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>

Using keyboard on multiple fotorama slideshows

I've an HTML page with two Fotorama slideshows, one in the top and another in the bottom of the page.
I can't use the keyboard to move between photos for the second slideshow, even if I click with the mouse on the second slideshow trying to get the focus.
I tried also with the API with no results.
Here's the code:
<!-- Link to jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<!-- First slideshow -->
<div id="fotorama1" class="fotorama" data-keyboard="true" data-arrows="true">
<img src="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/3.jpg">
</div>
<!-- Second slideshow -->
<div id="fotorama2" class="fotorama" data-keyboard="true" data-arrows="true">
<img src="http://s.fotorama.io/4.jpg">
<img src="http://s.fotorama.io/5.jpg">
<img src="http://s.fotorama.io/1.jpg">
</div>
Can anyone suggest me a solution?
Thanks in advance,
Luca

Adding link to featherlight.js pop-up

A pop-up appears when someone visit my website. I've used featherlight.js. i've added link to pop-up in HTML and when i click it, it doesn't work. I think it has something to do with featherlight.js
Here is the HTML code
<div class="lightbox" id="lightbox">
<p>Hello: <img align="right" src="img/IE-flag.gif"></p>
<br>
<p>Register now to qualify.</p>
<br>
click me
<br>
<center><p style="font-size:10px">No thanks</p>
<script src="js/featherlight.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.featherlight('#lightbox', {
closeOnClick: 'anywhere'
});
</script>
With closeOnClick: 'anywhere', you're telling Featherlight to intercept clicks everywhere, including in the dialog and close the dialog...
Remove that option and you'll be ok.

Self-container close-able full screen modal overlay for existing webpage

Please forgive me for not including any code, but I always struggle with front-end. I have found numerous blogs and how-to's for putting up a full-screen modal display, but all of them have disrupted my site's existing css or JavaScript in some way, some how. Can anyone point me to a simple, self-contained example that is guaranteed to be a drop-in solution for a website that already has its own things going on?
I googled full screen modal and found this. As close to a drop in solution as you could ask for I imagine. You'll need to download their lib though.
Taken from their site:
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
<script>
//This is your script
$("#demo01").animatedModal();
</script>

jQuery: is there a way to .LOAD() content that has script references in it?

I have 2 files. One called foo1.php and the other called foo2.php.
Contents of foo1.php:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<div class="yoxview">
<img src="files/Desert.jpg" alt="First" title="First image" />
<img src="files/hydrangeas.jpg" alt="Second" title="Second image" />
<img src="files/Jellyfish.jpg" alt="Third" title="Third image" />
</div>
Contents of foo2.php:
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$('.bar').load('foo1.php');
});
</script>
<div class="bar">this text will be replaced</div>
When I go to foo2.php I get a blank white page with a never ending loading favicon. I think this has something to do with loading the script:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
in foo1.php since the contents of that page are passed through the .load() function. When I remove that script reference foo1.php loads just fine. I don't think this problem is specific to that particular script. If I try to load any page with a script reference the same result occurs (the blank page/loading favicon).
Is there a way to load content from another page that has script references?
EDIT
Here's the link to the problem script:
http://www.yoxigen.com/yoxview/yoxview/yoxview-init.js
Try using this to intercept the document.write, it's worked for me in the past: https://github.com/iamnoah/writeCapture

Categories