Not sure exactly how to do this since I am not that great at Javascript.
Here is what I would like to do: A person goes to a page as soon as the page opens a lightbox opens automatically BEFORE the page loads any other content. The person will then read the information in the lightbox and have an a few options on how they want to proceed. While they read this information the rest of the page will load in the background.
How would I go about doing this?
Thanks!
Note: I am using Fancybox for my lightbox.
I would recommend prettyPhoto, I has a cool API that allows you to open the lightbox from javascript.
Following the API documentation here you can do something like this to launch lightbox on load using JS:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$().prettyPhoto()
api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
api_titles = ['Title 1','Title 2','Title 3'];
api_descriptions = ['Description 1','Description 2','Description 3'];
$.prettyPhoto.open(api_images,api_titles,api_descriptions);
});
</script>
see my notes in this question:
jquery lightbox plugin: Bug on IE7 and IE8!
This is similar to Lynda's approach and also works fine here:
<script type="text/javascript">
//<![CDATA[
<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
$('#YourImageId').trigger('click');
});
//]]>
</script>
...
<img id="YourImageId" ...
I found this after I asked this question but I will post it here for others =>
the script below is for v1.3.0
1) inline
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
something here maybe
<div style="display: none">
<p id="mycontent">I want to display this</p>
</div>
1) external html page:
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400.
'type': 'iframe' // see this?
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="http://domain.com/page-to-display.html"
id="autostart">something here maybe ... or not</a>
If you did want to continue using fancybox at any time then here is how I managed to get fancybox to open on page load:
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function($)
{
$.fancybox({
autoScale: true,
autoDimensions: true,
transitionIn: 'fade',
transitionOut: 'fade',
scrolling: 'no',
centerOnScroll: true,
overlayShow: true,
content: $('#somediv').html(),
padding: 20
});
})(jQuery);
/*]]>*/
</script>
That's how I managed it. Useful to know even if you don't use fancybox!
Related
I hope someone here is familiar with flickerplate. It's a slider plugin for your website.
The slider works great, but somehow whenever i add a new script beneath the script that loads flickerplate and it's settings, they don't work.
Unless I put them all the way down on the bottom of my file, beneath the tag.
the issue is quite easily solved.. by putting all of my scripts above the flickerplate script. But I'm still eager to know what is causing this.
So this way it doesn't work:
<script>
<!--Execute flickerplate-->
$(document).ready(function(){
$('.flicker-example').flickerplate({
auto_flick : true,
auto_flick_delay : 8,
block_text : true,
dot_alignment : 'center',
dot_navigation : true,
flick_animation : 'transition-slide',
flick_position : 1,
theme : 'light'
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#LeftSide").hover(function(){
$("#LeftImage1").attr("src", "images/Jesse Joey James Logo2.png");
},function(){
$("#LeftImage1").attr("src", "images/Jesse Joey James Logo.png");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#RightSide").hover(function(){
$("#RightImage1").attr("src", "images/Triple-J Productions Logo2.png");
},function(){
$("#RightImage1").attr("src", "images/Triple-J Productions Logo.png");
});
});
</script>
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 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>
I'm trying to use two(three if consider that the second uses 2 files) different plugins, jPanelMenu.js(to do a google mobile-like menu) and Superscrollorama.js(wich works together TweenMax.js), unfortunately they are conflicting, both works fine when alone, but when I put them both on the page, it all crashes. I already tried to use $.noConflict(); and jQuery.noConflict(); in a lot of different ways, unsucesfully. The best I managed to do is to make scrollorama/tweenmax work.. But, jPanelMenu still crashes.
Here's my code:
<script type="text/javascript" src="public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="public/js/jquery.jpanelmenu.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
var jPM = $.jPanelMenu({
menu: '#menu',
trigger: '.menu-trigger',
easing: 'ease',
duration: 250
});
jPM.close(true);
jPM.on();
jPM.trigger(onClick);
});
</script>
<script type="text/javascript" src="public/js/TweenMax.min.js"></script>
<script type="text/javascript" src="public/js/jquery.superscrollorama.js"></script>
<script>
jQuery(document).ready(function($) {
var controller = jQuery.superscrollorama({
playoutAnimations: true
});
controller.triggerCheckAnim();
controller.addTween('.scroll-trigger',
(new TimelineLite())
.append([
// Scale Logo
TweenMax.fromTo(jQuery('#logo'), 1,
{css:{width: '100%', padding:'15px 0 0 0'}, ease:Strong.easeInOut, immediateRender:true},
{css:{width: '59%', padding:'5px 0 0 0'}, ease:Strong.easeInOut})
]),0,0);
});
</script>
I'll really really really appreciate if someone here could help me with that..
As per the additionnal details that you gave me. Your problem is not a conflict between jQuery and others, but simply that the onClick function was not defined. The trigger function open or closes the menu depending on it's state and takes a boolean argument that specifies if the action will be animated or not.
If you do not want the menu to open when the page load, simply remove the jPM.trigger(...); call.
I am just a learner and don't have clue about javascript and jquery. What I want to ad an adblock detector script. What I found is this piece of code which gives a nasty alert message. What I want is to give an ajaxed message just not a message popping out of screen.
<script type="text/javascript">
function _enabled() {
alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');
}
function _disabled() {
alert('not detected');
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = 'disabled';
</script>
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
Replacing this code can you please help me with an alternate to this code?
{
alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');
}
I came along finding some solutions about getting it with jquery or jquery-ui but don't have the knowledge of what to put here and replacing the code. I tried code example from http://m0006.gamecopyworld.com/games/gcw_notice.shtml which gives a nice friendly Adblock Detect message. But it wasn't working at all. Only this Alert Message is working on my website.
As a very quick alternative, that looks a bit nicer you can use a jQuery-ui dialog (as Ricky Baby said)
You will also need to include the jQuery and jQuery-ui libraries in your page.
These can be downloaded from http://jquery.com/download/ and http://jqueryui.com/download/, if you haven't got them already.
You can change the "Hey dude ...... etc" text to what ever you like
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
</head>
<body style='height: 100%;'>
<script type="text/javascript">
function _enabled()
{
var html = "<div>Adbloc detected</div>";
var diag = $(html).dialog(
{
autoOpen: true,
modal: true,
close: function() { $(this).empty().remove(); },
buttons:
{
"Close": function() { $(this).dialog("close"); }
}
});
}
function _disabled()
{
var html = "<div>Adbloc NOT detected</div>";
var diag = $(html).dialog(
{
autoOpen: true,
modal: true,
close: function() { $(this).empty().remove(); },
buttons:
{
"Close": function() { $(this).dialog("close"); }
}
});
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = '_disabled';
</script>
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
</body>
</html>
Alternatively you could just put a message at the bottom of the screen if you didn't want a pop up at all
<div id='adBlockDetected' style='position: fixed; bottom: 20px; left: 0px; width: 100%; display: none;' >Hey dide .... etc </div>
Then in the _enabled() function
$("#adBlockDetected").css({display: "block" });
See this question:
Problems with Adblock detecting
at the bottom, he sets his message to display in a div ( which he calls #Ad-One ) by setting the html attribute.
If you want to use JQuery-ui there is the dialog option to make the message box more pretty see: http://jqueryui.com/dialog/
However you are also getting your terms mixed up - AJAX - is a "brand" name for requesting data from the remote sever using the XMLHTTP object and related techniques.
If all you need is "pretty" alerts, jQuery UI is a bit of an overkill. I'd go with something like Apprise: http://thrivingkings.com/read/Apprise-v2-The-new-and-improved-attractive-alert-alternative-for-jQuery
Using nothing but the default settings:
<!-- added to head -->
<link href="path_to_css/apprise-v2.min.css" rel="stylesheet" type="text/css" />
<script src="path_to_jquery"></script>
<script src="path_to_scripts/apprise-v2.min.js"></script>
<script>
$(function(){
Apprise('hi there');
});
</script>
gets you a pretty slick alert message:
Of course, I'm also curious as to what you're trying to achieve here:
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
Unless that PHP page is actually a JavaScript file, you can't do that. The src attribute needs to point to a valid and addressable JavaScript file.