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.
Related
I have the onclick event: onclick="javascript:_stats_content('my_bets');" which works fine.
This loads new content into a div.
However I want to set a default piece of content to load when the page loads. I have attempted to do this with the code below, but it is not working:
<body onload="myFunction()">
<script>
function myFunction() {
_stats_content('my_bets'); // have also tried with 'javascript:' infront
}
</script>
Can anyone provide any solutions?
Thanks.
EDIT:
Upon reading comments, I have added type="text/javascript".
I also replaced with an alert() and it fails to show. I should note that I am using AngularJS to display the page so this might interfere. However the first onclick example works fine on the page, so I don't understand how onload would be any different.
EDIT2: This is an extract of code from the top of the page:
<head>
<script type="text/javascript">
function myFunction() {
alert("Hello! I am an alert box!!");
}
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>
<?php include './js/includer.php'; ?>
</head>
<body onload="myFunction()">
I have replaced with an alert to make it easier to troubleshoot, although the alert is still not showing. I think it's just an AngularJS related issue, guess I'll just have to figure this out.
Whilst I wasn't able to get this exact method to work, the reason for which I still have no idea. I imagine it's AngularJS interfering.
I used:
<img src="87.jpg" onload="javascript:_stats_content('my_bets');" width="0" height="0">
Just before the </body> tag and that worked.
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?
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>
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>
We have been using uploadify for image upload and prettyPhoto for displaying images on lightbox in our Rails application. Both works well if used separately. Now we want to display uploadify control on lightbox just like dropbox uses but it start screaming if used with prettyPhoto.
Here is sample html using uploadify with prettyPhoto.
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<link rel="stylesheet" type="text/css" href="prettyPhoto.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script src="jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
$('#closeme').live('click', function() {
$.prettyPhoto.close();
return false;
});
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
<div id="inline-1" style="display:none;">
<p>This is inline content opened in prettyPhoto.</p>
<input type="file" name="file_upload" id="file_upload" />
</div>
</body>
</html>
Here you will see link to popup and by clicking on the link it shows uploadify control on lightbox. Then you chooses images from the disk to upload to server. After choosing images I face two issues:
1) Getting Error: uncaught exception: Call to StartUpload failed javascript error on FF and Crome
2) The selected images are not getting listed on uploadify control on lightbox. If you close the pupup and again click on popup link it shows list of files.
Uploadify works fine if I remove $("a[rel^='prettyPhoto']").prettyPhoto(); line.
Do you have any idea how it can be fixed?
Also I would appreciate if someone suggest other plugins to achieve such dropbox style uploaders.
Thanks, Amit Patel
You'll want to initialize uploadify after the lightbox is opened and not on page load. The reason for this is because Flash will not load if the element is hidden.
I looked at the prettyPhoto api and couldn't find any event that is called after the lightbox has finished opening, but that's what you'll need to do.