Open lightbox when page loads - javascript

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.

Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');

This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").

Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>

EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Related

The loading screen for my website isn't disappearing

I am loading a large image for the background of my website, so instead of having it messy I decided to add a nice little preloader with CSS and Jquery.
Right inside the <body> tag I have:
<!-- CSS Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<em class="spinner-text">One moment</em>
</div>
</div>
Then, before the closing </body> tag I have this script:
<!-- Spinner -->
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>
When I open the index.html file directly, it works perfectly, but when I was trying to load it on my website (link) it just shows the preloader forever.
Interestingly, I've found that if I open the network panel in the developer console, most of the time the preloader works as it is supposed to.
Does anyone know what the heck is going on here?
Try to import your jQuery inside the head tag.
Adding this attribute (data-cfasync="false") within JS will not work to exclude the script from Rocket Loader. Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:
<script data-cfasync="false" src="/javascript.js"></script>

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

Javascript function not working. Script positioning issue?

I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.

Is my jQuery .load bloacked by the CMS?

I am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.
My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.
P.S: When pasting the entries directly into the page it works as expected.
Edit: full working code
<p>
<mt:setvarblock name="html_head" append="1">
<script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</mt:setvarblock>
<mt:include name="include/header.tmpl">
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
<!--$("#divTestArea1").load("../gallery/output_en.txt");-->
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
<script type="text/javascript" charset="utf-8">// <![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
// ]]></script>
</mt:include>
</p>
Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>

Jquery and ShadowBox

I cant make the shadowbox work...I have a static html page which has an image that acts as a link to open a swf in the shadowbox.
however when I click on the image it opens the swf like any other image file in the browser.
The Shadow box doesn't seem to work at all.
This is my html page. I am using shadowbox-build-3.0b. Its strange that this editor doesnt allow new users to use image tag in the html code in the editor. So i have changed mine to image.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/adapters/shadowbox-jquery.js"></script>
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<link type="text/css" href="shadowbox-build-3.0b/shadowbox.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="shadowbox-build-3.0b/languages/shadowbox-en.js"></script>
<!-- Begin Shadowbox JS -->
<script type="text/javascript">
jQuery(document).ready(function () {
Shadowbox.init({
language: "en",
players: ["image"]
});
});
</script>
<!-- End Shadowbox JS -->
</head>
<body>
<image src="imagewithplaybutton.jpg" >
</body>
</html>
Hmm. I have not used shadowbox myself, but if you look at the way how the page suggests you set shadowbox up, there seems to be things that are wrong.
As i understand you want swf file to open when clicking on image; Shouldn't you set players: to swf then?
Your code also does not show if your img has link around it and if that link has rel="shadowbox" attribute.
I guess it should be set up something like this:
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ["swf"]
});
</script>
<img alrt="click here to open swf file" src="imgofflash.jpg"/>
Shadowbox.init() shouldn't be in the document.ready(). It should execute as the page loads.

Categories

Resources