This is the first time i am using FancyBox. tutorials I found online seemed great, but when i follow them, i get a strange behavior the way it opens the images. There are also no arrows or X(close) button. I made sure i have the "fancybox_sprite.png" file in the same folder as the .js and .css files with no luck. When i click on a image, it opens a window similar to fancybox, but it is off to the side and only way to get rid of that window is by pressing escape or refresh.
Any tips for me? Here is the page with the images:
http://lbirental.hopto.org:1234/rooms%20-%20Copy.html
Thanks!!!
Your css file link(current bad version below) is incorrect. Your line that is adding the css file has extra quote characters in the media and rel attributes. Take out those extra quotes.
<link media="”screen”" type="text/css" href="js/FancyBox/source/jquery.fancybox.css" rel="”stylesheet”">
Related
I am working on a project on my website Click here to go to project site,
but after inputting all the needed information, the download element does not work. Here is the code for the download link: The download may work on this website, but it doesn't work on my website, which is strange.
<a id="down" href="blob:http://veryblankwhitepaper.weebly.com/8d869eaa-5bce-4326-9dff-dd0b50286a84" download="filename.txt">DOWNLOAD</a>
For some reason, when I click this, nothing happens.
If you want, you can see the javascript here.
Scroll down to the scripts within the "/text-file-generator.html"
(I put all the scripts for my pages in one file)
Edit1: If I take the element out of the div that it is in, it seems to work, but I want it to still be in the div.
Your scripts change the link too quickly. Try adding a setTimeout function for half a second when you click the link. This should allow it to download.
Onsen ui Slider works fine for calling simple pages.
I managed to have somthing like so working:
<ons-list-item class="bottom-menu-item"
ng-click="menu.setMainPage('dir_02/index.html', {closeMenu: true})">
However the links to sub directories called from within dir_02/index.html will not work.
For example the line below is part of the html of dir_02/index.html:
link href="../cssdir/css/main.css" type="text/css" rel="stylesheet"
The links in themselves are fine. They work if I launch my minisite directly from dir_02/index.html manually.
As an aside, I also realized that f I put all the html files that dir_02/index.html can manually lead to via hyperlinks, at the root level (www), the manual hyperlinks work (if I click on them I get the intended page). BUT the slider disappears!
However if I leave the files where they are supposed to be (that is, within the "dir02" folder, the link does no work. This is suprising since the link is written like so:
href "someotherpage.html"
It should be looking within the same directory , shouldn't it?
But if I open it via the slider, the browser cannot find the file(s).
Is there a workaround?
Thanks, this is crucial to my project!
:-)
I'm pulling my hair out over this one. I'm using a very simple version of shadowbox - it works correctly when I'm using images but when I use a URL to display in the modal, it will open a blank shadowbox and then download the html link in the href as a file to my downloads folder.
<a class="galleryItem" rel="shadowbox[Gallery];height=165;width=640;player=iframe;" href="/Bios/MR.html" title="MR">
And the simple init is just this:
$(document).ready(function() {
Shadowbox.init({
player: "iframe",
handleOversize: "drag"
});
});
I've tried so many variations of the options at this point and I'm stuck.
This one has been resolved - I left out one detail I didn't think was relevant at the time but I was on an O365 environment and changing the file extensions from .html to .aspx fixed the issue. I'm answering my own question because I hope this can help someone else.
This is going to sound like a seriously stupid question. I have a very super simple page that I created that currently just displays a jQuery modal Dialog box. If, when I link to the jquery files, I just link to http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css for example, everything works just fine. When I download those files and link to the local directory, almost everything works fine, but the close button in the top of the dialog doesn't show up. The box is there, and it's clickable, but the X isn't there. Any idea why this happens?
in the CSS there are references to images like:
background-image: url(images/ui-icons_cd0a0a_256x240.png);
Did you also download the images and placed them in the correct directory?
just get the whole package of jQueryUI http://jqueryui.com/download/
Do you have the images stored locally as well? You should probably download the whole jQuery UI package from here http://jqueryui.com/ instead of trying to find the individual files from the CDN.
I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container