I'm trying to apply Fancybox 2.1.5 to a website and am only able to get it to partly work. The navigation buttons and close button will not show up at all. This is the coding for the html page that contains the website's images:
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look1_lg.jpg"><img id="look 1: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look1_thumbnail.jpg" data-href="img/gallery/set1/look1.jpg" src="img/galleryPrototype3/semiPixel.png" alt="look 1" width="1060" height="800"></a></div>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look2_lg.jpg"><img id="look 2: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look2_thumbnail.jpg" data-href="img/gallery/set1/look2.jpg" src="img/galleryPrototype3/semiPixel.png" alt="" width="578" height="800"></a></div>
</body>
And this is the basic Fancybox jQuery script that I want to use:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
When the Fancybox jQuery script is inserted into the HTML document and I click on look1.jpg, a grey translucent overlay appears, but no image.
When the Fancybox jQuery script is completely removed from the HTML document and I click on look1.jpg, the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
There are some other posts on the same issue that I have used to try and problem solve my issue. From those posts I've double checked the following and everything seems to be set up correctly: The Fancybox sprite and overlay png files are located in the same folder as the Fancybox CSS document, the Fancybox jQuery source code and stylesheet are linked up correctly, and the anchor tags for the 2 images both have "rel=group" applied to them.
I am wondering if the way the site is coded overall has something to do with it? The site is also built with AJAX and bootstrap. The HTML page referenced above that contains the website's images is loaded into the website index page via AJAX. As a test I put the coding for that page in a standalone HTML file and fancybox worked perfectly, which makes me think that my guess is correct. If this is the case though, I have no idea how to fix the problem. For reference, this is the code for the website index page:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/galleryPrototype3.css">
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="webSiteLoader"></div>
<div id="glob-wrap">
<!--menu: This is the main navigation. It's been simplified here to include only the piece of navigation that refers to the html page referenced above-->
<nav id="mainNav" data-follow="location" data-type="navigation">
<ul>
<li>people</li>
</ul>
</nav>
<div class="_cover"></div>
<!-- gallery holder: this holds the website's image gallery -->
<section id="galleryPrototype3"></section>
<!-- content holder -->
<div id="content_pages" data-follow="location" data-type="switcher" data-flags="ajax"></div>
<!-- category pages: This has been simplified to include only the line that refers to the html page referenced above -->
<div id="category_pages" data-follow="location" data-type="switcher">
<div data-id="people" data-source="peopleCategory.html"></div>
</div>
</div>
</body>
</html>
I also tried placing the Fancybox jQuery script in the website index page rather than in the html page that contains the website's images. In that case as well when I click on an image the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
I'm at a loss, so any help will be appreciated!
Related
First of all I'm a newbie at Javascript/JQuery
I'm trying to make a bxslider. I'm not being able to work with it, I did all the steps from bxslider website and still can't, been searching and nothing. Instead of working, it's just working as a normal ul, showing all photos vertically.
The libraries
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script language="javascript" src="css/libraries/jqueryBxslider/jquery.bxslider.js" ></script>
<!-- bxSlider CSS file -->
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet" type="javascript">
The ul that contains the photos.
<div class="container">
<ul id="slider">
<li><img src="css/libraries/images/test1.PNG"/></li>
<li><img src="css/libraries/images/test2.PNG"/></li>
</ul>
</div>
Code at my javascript file.
$(document).ready(function() {
$('#slider').bxSlider({
auto: true,
autoControls: true
});
});
Thank you.
When testing locally, you need to use a full URL (including protocol) in any libraries you link to that use protocol-relative URLs (e.g. src="//ajax.googleapis.com).
Change:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Otherwise the browser's default behavior is to use the file:// protocol to search your local file system for jQuery.
firstly, make sure your bxslider libraries path src on <script></script> and href on <link>is correct.
and then change this line :
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet" type="javascript">
to
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet">
without type="javascript" because the type is CSS.
So the answer was to make a before the where it contained the JQuery code.
I'm sure I'm making a silly mistake but it took me hours and I couldn't find any solution for my problem. Everything seems ok but not working. I'm using Foundation 5 reveal. But modal window does not show. Here is my code:
HTML
<a class="openModal" href="#" data-reveal-id="imagemodal"><img src="image.jpg" /></a>
<div id="imagemodal" class="reveal-modal" data-reveal>Modal</div>
I've also included the following js files in body tag:
<script type="text/javascript" src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript" src="js/foundation/foundation.reveal.js"></script>
Any help is appreciated in advance.
Put the call to foundation.reveal.js before you call $(document).foundation();.
I'm pretty sure this is because $(document).foundation(); initiates only those modules that have been specified prior to it, something that Foundation doesn't make clear in its notes.
Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page.
I just wanted to add this piece of simple, near bare-bones modal markup, I spent nearly 4 hours last night getting it right, I don't think there's much out there to deal with these reveal-modal issues
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
reveal modal
<div class="reveal-modal" id="myNormal" data-reveal>
Modal
<a class="close-reveal-modal">close</a>
</div>
<script>
$(document).foundation();
</script>
</body>
I hope this is of any help for future visitors.
My problem is with Jquery mobile's changePage(), let me start out by saying i know there's a bunch of other post about this issue, but i have tried all the solutions without any luck so that's why i'm now asking for help.
I've build a Phonegap project, where each screen is = a .html file. i got my index.html that loads all the scripts needed for the entire app. Then my index.html loads a new page with $.mobile.changePage(). but when this happens the next page do'sent have any script's or css's attached to it why?
This if my index.html
<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
var checkUser="admin";
function onDeviceReady() {
/*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
if(window.localStorage.getItem("user") === checkUser){
$.mobile.changePage("welcome.html",{transition:"slide"});
//window.open("welcome.html", "_self");
} else {
//window.open("login.html", "_self");
$.mobile.changePage("login.html",{transition:"slide"});
}
}
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
This is my login page
<!--Login page-->
<!DOCTYPE html>
<html>
<body onload="loadLogin();">
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview">
<div align="center" data-role="content">
<img src="icon.png" alt="">
</div>
<div data-role="content">
<label for="textinput">Indtast brugernavn</label>
<input type="text" name="textinput" id="textinput" value=""/>
</div>
<div data-role="content">
<label for="passwordinput">Indtast adgangskode</label>
<input type="password" name="passwordinput" id="passwordinput" value="" />
</span> </div>
<div data-role="content">
<div>Login</div>
</div>
<div data-role="content">
<div></div>
</div>
</ul>
</div>
</div>
</body>
</html>
As stated in the start, my problem is that non of my functions on my login page works to give an example of that i got my infoButton that runs onClick="infoPopup(); and this function makes a popup navigator.notification.alert("Message", null, "Info", "OK"); But it do'sent show anything when i press it.
Am i loading my scripts wrong or whats wrong, any help would be really much appreciated?
EDIT 1:
If i copy all my index.html to all other pages what happens is this. my index.html links to my login.html correct. On the login page my onClick="infoPopup(); dosent work, but my onClick="saveLogin();myFunction();" works sort of. my login info does get saved but in my saveLogin(); i got a navigator.notification.alert(); but the alert aint popping up. i know that all of my functions work because they did when i used window.open(); instead of changePage. And the reason why i changed was because with window.open(); i cant get the jquery page transitions Any ideas?
EDIT 2:
Don't really know what i did but works now:) thanks for the reply's.
Even though i tired this alrdy what worked for me was to move all javascripts and css's to the index.html.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
Repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will recreate head section.
simple change like -
$.mobile.changePage("welcome.html",
{transition:"slide"}
);
I have a master(parent) page index.html. I put an iframe in my master page, iframe width=535 height=1330. I put menu in master page & all page show in iframe. I have a video gallery page create by video lightBox. If i click on video, it's played fine but in side the iframe. If I make it full screen also it stay in side iframe.
So i want the video in iframe, that show in master page.
My Master page code
My video gallery page:
<link rel="stylesheet" href="index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="index_videolb/overlay-minimal.css"/>
<script src="index_videolb/jquery.js" type="text/javascript"></script>
<script src="index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
<div class="videogallery">
Stream Video to Website by VideoLightBox.com v2.4
</div>
<script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script>
<script src="index_videolb/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section --></td>
</tr>
So please help me to give me any script or, any code to change, that can solved my problem.
Thank you
MAHS
Try to use this following iframe code:
<iframe src="page.html" width="535" height="1130">
<p>Your browser does not support iframes.</p>
</iframe>
For exp: You can embed it in page.html in your index.html
Trying to use Scriptaculous to reveal details of an event on a click.
I've called the relevant files
<head>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<script src="java/scriptaculous.js" type="text/javascript"></script>
<script src="java/prototype.js" type="text/javascript"></script>
</head>
And I want to use this button to call the details
<img class="open" src="./img/plus.png">
And I've hidden the eventdetails div inline
<div id="eventdetails" style="display:none;">
The cursor hover shows that the link is working, but no movement of any kind
Put the prototype line above scriptaculous; Scriptaculous relies on Prototype.