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.
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 creating forum on my site and I'm facing an issue while posting bb image code links.
This was also the issue when I installed phpbb forum.
When I create a new thread consisting of images from other image-hosting sites, the thumbnails of images are showing on the forum only for the first time. As soon as I refresh the page, the thumbnails are replaced with broken image icon. But the page still redirects to the correct image-hosting page.
This is how it looks after refreshing the page:
This is what I get after Inspect element.
In the above image the first anchor tag is working but in the second anchor tag it added "pagespeed.ic.vCpxnjVn6L.webp".
Thanks
Found the solution.
Added the following code in .htaccess file in root directory.
ModPagespeed off
ModPagespeedDisallow http://sitename/*
This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.
Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});
I've built a site http://ucemeche.weebly.com , Now I want to transfer it on other server. http://Weebly.com provides a function to download whole site in zip format that I've done.
But problem is when I am browsing that downloaded site the slide shows, photo gallery etc are not working in as working in live site. Perhaps it is related to java script.
Why is it happening ? What is the solution ?
Check the paths of the javascripts. You might be missing some scripts or you do not include them properly.
Check the error console in your browser. Most likely it will show you what's wrong.
You simply have to change the paths to the images in the html file
the paths will be something like:
"2\/1\/2\/5\/56254238\/3375189.png"
change them to:
"..\/folder name where your files are\/uploads\/2\/1\/2\/5\/56254238\/3375189.png"
This was three years ago, so perhaps this is a late answer. There is a hosted file slideshow-jq.js. In it, there is a function largeURL(photo).
Copy that slideshow-jq.js into the root of your zip, and edit the file:
url = '/uploads/' + url.replace(/^\/uploads\//, '');
Remove the leading / in front of uploads.
Now, update your page and look for this line:
<script src="http://cdn2.editmysite.com/js/site/main.js?buildTime=1234"></script><script type='text/javascript' src='http://cdn1.editmysite.com/editor/libraries/slideshow-jq.js?buildTime=1234'></script>
Or something like that. Change the src to the local file, "./slideshow-jq.js"
That corrects the issue.
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