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
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.
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 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”">
I'm displaying images like this:
<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />
/get_image/{{image.id}} returns some JSON with the URL to the actual image, and then I replace the src attrivute of the <img> tag using jQuery.
The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that placeholder.jpg says "Loading..."
It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when all of it has been downloaded.
A way to show a progress bar would be even better.
Does anybody have suggestoins?
You can use preloader, but still should wait for image to load completely.
Other solution relies on how you saved the images.
You can open the image in an application like photoshop and when saving the file, click on the PROGRESSIVE option(Progressive option will make the image viewable even if it is not completely loaded).
In Photoshop:
Open the image
Click on the File -> save For Web ... (or Save for Web and Devices on previous versions)
On the upper right part of the opened dialog, choose the 'JPEG' format
You will see some options, choose 'Progressive'
Save
This option will make the file slightly bigger in size, but the browser will show the images as they load.
Rather you can add image attribute 'title' or 'alt' value as 'Loading .... '
as title or alt property get displayed to user if image is about to load.
after image get loaded using Javascript you can change the alt or title value.
this is a basic solution. you can use it until you find proper solution.
Your question is very similar to my question where I discovered a solution which worked for me. It is unclear if it will work for you though because commenters have suggested it is dependent on the image being saved with the progressive option enabled.
For my case, the initial image always showed as it loaded and so my solution seemed to utilize that. For your case, if you were to initially load your big file first as a testcase and it appeared as it was downloaded, then I suspect my solution would also work for you.
I am currently running Clearbox JS on my site so that users may view a larger version of an image once they have visited the images page. Now, I just recently implemented this and I have noticed that on every single page at the top of the page Clearbox JS echos the command that it is doing. Whether it be initializing, or viewing an image, or event rotating an image. I really do not want this message popping up at all. I would much rather being required to put a link somewhere on the website to the developers website then having to deal with this. If anybody knows how to remove this, please answer. I am providing a link to the website so that you know what I am doing as well as a pastebin link to the clearbox.js file which is the config file.
website: www.dsdwebdesign.net/bootstrap_apgnew/index.php
pastebin: http://pastebin.com/NgBgc34X
Try this somewhere in your page, or the cb_style.css file (but make sure you read their conditions, I am not sure if you are allowed to do this with this piece of software):
#CB_OSD{
display:none!important;
}
It should hide the box at the top.