I downloaded the standalone version of shadowbox for images with css support. I loaded the files onto my website server and put the following codes on my page:
HTML head for webpage:
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
HTML link on my webpage:
My Image
Nothing happens with this code. Shadowbox doesnt load....nor does the pic load in shadowbox when I click the link. What am I doing wrong?
What I am trying to achieve once i get this to work is to, upon page load, have shadowbox automatically show and start scrolling through a gallery of photos (i hate the click link thing)
I downloaded the latest shadowbox and used your code above and it worked fine.
Are you sure the paths are correct to both shadowbox and the image.
Have you checked the console logs?
In terms of setting it up so it opens on load they have an example on their website...
EDIT:
Player needs to be set to "img" and the content only needs to be the path to the image.
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true
});
window.onload = function() {
// open a welcome message as soon as the window loads
Shadowbox.open({
content: 'https://www.google.co.nz/images/srpr/logo11w.png',
player: "img",
title: "Welcome",
height: 350,
width: 350
});
};
</script>
Related
I have three different ways to add Twitter code for loading Twitter button that seems almost identical to me, but for some reason only two of them do work.
Here is how I define Twitter button in HTML:
Tweet
Here is a fist method that works, just embed JavaScript code in the page:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Here is a second way that works, put this function into a separate file and load this file on page load:
<script>
$(window).bind("load", function() {
// js/social.js just contains the same code that
// was in <script> tag in previous example
$.getScript('js/social.js', function() {});
});
</script>
But if I just include js/social.js file via tag it doesn't work:
<!-- js/social.js here has the same content as in the previous example -->
<script type="text/javascript" src="js/social.js"></script>
and image does not load.
Could you explain what it the difference between those variations?
I am using Firefox 40.0.3
I'm setting up a gallery, with the pictures in a wide window in the middle of the page, controlled by a scrollbar. I've also set up a page with a form used to contact the artist to arrange a sale, and I want this page to open in a fancybox window.
The link to the form works, but it will not open in a fancybox window.
The scripts in the head of the page are as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" id="sourcecode">
$(function() {
$('.scroll-pane').jScrollPane();
});
</script>
<script>
$(function() {
$('.iframe').fancybox({
width : '50%',
height : '80%',
titlePosition: 'outside'
}); // end fancybox
}); // end ready
</script>
The link meant for a fancy box window looks like this on the page:
<li>buy</li>
My JS console says that it "Cannot read property 'msie' of undefined" in the JQuery fancybox file, and also that $('.iframe').fancybox({ is not a function, but it all seems to work fine in various tutorials and experiments I've pursued where JScrollPane is out of the picture.
The problem is you are using an old version of fancybox and new version of jquery.
Old version of fancybox depends on jquery.browser which is remove in all versions from jquery 1.9.
either use jquery migrate file or use the latest fancybox
I am adding a third party comment plugin on my html pages. The plugin slows down the pageload somewhat due to the number of connections the page makes to load the comment plugin.
The comment plugin will be contained within a div.
I would like to delay the loading of the comment javascript until a visitor clicks a 'add/read comments' button/link.
The language for the page is html5. I want to preferably, if possible, keep my pages as .html
The pages are html5 and css3.
my ccs3 and html5 knowledge is average. my javascript knowledge is poor. all other languages i haven't a clue about.
I was going to have the 'add/read comments' button/link, load up a duplicate page with the third party comment plugin loaded, but felt this was a messy way of doing this, as well as adding more time (another pageload then the plugin script) for the user to wait before being able to comment.
I don't want this comment plugin loading at all, not even in the background, until the user clicks the button. The reason for this, is because I don't want the user to see any indication of the page hanging/still loading, when the page load is complete without the comment plugin visable.
I sincerely hope this makes sense for someone to follow.
Answers will be much appreciated.
Thankyou for your time.
The following is the code livefyre gave me to insert into my html..
<div id="SPLUG"> <--- that is the div i am surrounding the comment plugin in
<div id="livefyre-comments"></div>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
(function () {
var articleId = fyre.conv.load.makeArticleId(null);
fyre.conv.load({}, [{
el: 'livefyre-comments',
network: "livefyre.com",
siteId: "xxxxxx",
articleId: articleId,
signed: false,
collectionMeta: {
articleId: articleId,
url: fyre.conv.load.makeCollectionUrl(),
}
}], function() {});
}());
</script>
<!-- END: Livefyre Embed -->
</div>
You can dynamically inserting external JavaScript to web pages when click on a button:
<button onclick="addScript()">Click</button>
<script type="text/javascript">
function addScript() {
var headTag = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
headTag.appendChild(newScript);
}
</script>
It's not really difficult. Defer loading of JavaScript or external stuff is now needed for faster page loads. For example, there are Facebook/twitter plugins which I wanted to load once my page is loaded so one way to do is to initialize external plugins loading in window.onload or $(window).load in case of jQuery.
In your case, in the comment button onclick event, load the JavaScript of external plugin. What we typically do is manipulate the elements using Document Object Model (DOM).
As an example, I want to load an iframe on button click:
<input type="button" id="btnComment" onclick="createframe();" style="height:50px; width:120px;" value="Click Me!" />
<div id="container"></div>
function createframe() {
var i = document.createElement("iframe");
i.src = "http://www.adilmughal.com";
i.scrolling = "auto";
i.frameborder = "0";
i.width = "90%";
i.height = "220px";
document.getElementById("container").appendChild(i);
}
What this will do is create a new iframe element with any src URL and append as container's child.
Output and code can also be viewed on http://jsfiddle.net/adilmughal/ZJZn7/
I've taken a look at the liveFire docs, and it looks like it should be easy enough to initialise it on click, rather than as the page loads.
However, liveFyre actually initialises as soon as it can - rather than playing nice and waiting for the page to be ready. This is very likely the reason it slows down your page load. Does your liveFyre code look like this?
<!-- START: LiveFyre Embed -->
<script type="text/javascript" src="http://livefyre.com/wjs/javascripts/livefyre.js"></script>
<script type="text/javascript">
fyre = LF({
site_id: xxxxx,
version: '1.0'
});
</script>
<!-- END: LiveFyre Embed -->
If it does, try changing it to:
<!-- START: LiveFyre Embed -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://livefyre.com/wjs/javascripts/livefyre.js"></script>
<script type="text/javascript">
$(function(){
fyre = LF({
site_id: xxxxx,
version: '1.0'
});
});
</script>
<!-- END: LiveFyre Embed -->
This should just make livefyre wait until the page is interactive before it tries to initialise. It may not help enough (or at all), but it's a safe and easy option to try first. If it doesn't help enough, post back, and we'll pursue your 'initialise on click' option.
--- UPDATE ---
Based on your comments with the code snippet, try this (I think the comment has been a little bit mangled - hopefully you can translate this over OK:
<script type="text/javascript" src="zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js">
<script type="text/javascript">
$(function(){
var articleId = fyre.conv.load.makeArticleId(null);
fyre.conv.load({}, [{
el: 'livefyre-comments',
network: "livefyre.com",
siteId: "xxxxxx",
articleId: articleId,
signed: false,
collectionMeta: {
articleId: articleId,
url: fyre.conv.load.makeCollectionUrl()
}
}]
, function() {});
})();
</script>
Again, the idea is just to wait for the page to be interactive before trying to initialise. Let us know what happens!
I am new to the jsp. I am creating a jsp page.Index.jsp, I want that when this index.jsp is loading one modal pop up should appear that would ask the user to enter some information.Please let me know how to add it.
You can do something like this using jQuery.Download jQuery file and place it under your webapps directory,
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(showWindow());
function showWindow(){
window.open('mathutil.jsp','myWindow','height=255,width=250,toolbar=no,directories=no,status=no,continued from previous linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
</script>
This will be called before your JSP page get loaded.
If you want something as soon as page get loaded (e.g. wait until all assets have finished downloading, such as images and scripts.) use onload() in your body tag.
I am working on a jQuery script on http://www.qxl.dk/ and I can't seem to get IE7 (or more accurately, IE8 in IE7 compatibility mode) to load my content.
The sidebar box on the right named "QXL Aktuelt" loads its HTML content from an external file using Ajax load(), then triggers a custom jQuery event ("aktuelt_loaded") that starts a carousel script (like a scrolling newsticker).
Several other content sections on the same page are loaded through Ajax and they work just fine, so I'm wondering what's going wrong. Everything works as expected in Firefox 3.6 and IE8, but not in IE8's compatibility mode.
The script that loads the Ajax content is (inline on the page):
<div id="qxlaktueltHolder"></div>
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
The external script that responds to the event is in the following file:
http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js
All ideas are very welcome.
EDIT:
Looks like your content is being loaded. You seem to have a CSS display issue. Using IE's developer tools, I searched for the href of an a that was loaded properly in Safari
http://www.123hjemmeside.dk/pages/receive.aspx?target=wl&partnerkey=dkqxl:Hobby_aktuelt_1
and found that is was on the page along with all the other content.
UPDATE:
The problem is with your #newsticker element. It, and all of its li elements, have height and/or width properties set to 0.
So whatever code is responsible for sizing/displaying the #newsticker and its content seems to be the culpret.
This is a guess, but this script qxlaktuelt_liveload.js is being loaded after this:
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
So depending on how long the load() takes, the script may or may not be loaded.
Try:
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/jcarousellite_1.0.1.min.js'></script>
<script type='text/javascript' src='http://www.qxl.dk/contents/dk/js/qxlaktuelt_liveload.js'></script>
<script type="text/javascript">
$("#qxlaktueltHolder").load("/contents/dk/modul/qxlaktuelt/qxlaktuelt.htm", function() {
$("#qxlaktueltHolder").trigger("qxlaktuelt_loaded", []);
});
</script>
Remove all the console in your JavaScript code. For some reason, the IE's break with this.