Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox.
The Beta Site and Gallery Page is here:
http://www.sound-enclosures.com/FanAir/index-3.html
I have a Link to " img src= " to the Thumbnail and a "a href= " to the BIG Image.
Problem is only One of Four Images load. It's the First Image on the Page The Blue Picture. This seems to work correctly. The other Images try to link, however they just Hang Up on Loading. I have verified the file names, locations, checked the URL's etc.
I am using Lightbox.min. script before "/head" and bootstrap.min.js at the bottom of my page before "/body"
The Monster Template I am using was furnished with jQuery v1.11.1,
I have read in the Stackoverflow Forums that JQuery 1.8 seems to work better with Lightbox, I have not tried that and would be reluctant to do so as it might mess up other pages.
Can any one take a look and possibly provide some assistance, guidance?
Thank you all in advance.
Scotty
Your images do not load because they are either not on your server or not in the folder images
There is no image named: page4_pic15_Big.jpg that is set as your href:
<a href="images/page4_pic15_Big.jpg" data-title="Heavy Duty Centrifugal Blower" rel="lightbox"> <img src="images/page4_pic15.jpg">
Backward Inclined Blowers<br>
</a>
Related
Home page- I have more than the HOME PAGE and for some reason, the logo picture does not appear on the other pages. Do you have any idea how to fix that?
sample page
whenever i try to fix for another page the previous one gives the same problem.
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
Hello from header.php
In short, the browser isn't displaying the image because the browser can't find it using the instructions you gave it. Those instructions are the src attribute of the img tag...
Now, there are a few possible reasons why the browser cannot find the image. You might have one problem going on, or all of them. Let's go through the following exercises to see if maybe we can narrow down the problem.
First, try putting the image in the same folder as your HTML document
his is the simplest way to insert an image. As long as everything is in the same folder, things are pretty simple to find.
Possible snags?
Simple (but common) typo: scr= instead of src=
Mispelling the image name: src="mypick.gif" or src="my pic.gif" instead of src="mypic.gif"
Wrong extension: src="mypic.jpg" when your image is a gif... mypic.gif. (Should I use gif or jpg? You might find this interesting.)
Malformed img tag...
Before going on to other possible reasons for your missing image, make sure that you can successfully insert an image as shown above.
im using wordpress and want to add a link which open in a frame/lightbox. Cant find a small solution for that.
There should be no new window. Just a content box which appear inside the page where i am. I hope u know what i mean
That should be pretty easy using the Easy Fancybox plugin.
Citing the entry from the FAQ section of the plugin's page:
Can I display web pages or HTML files in a FancyBox overlay?
Yes. First, enable the iFrame option on Settings > Media. Then, in your post or page content create a link to any web page or .htm(l) file in your content. Then switch to the Text tab in the Classic Editor or to Edit as HTML (under More options in the block menu) in Gutenberg, find the link <a ... > tag and give it a class="fancybox-iframe" attribute.
Voilà !
Beware, though, that:
Note: Not all external web pages are allowed to be embedded in an iframe and may be blocked by a server response header or script. The result will be either an empty/blank light box or the target page “breaking out” of the light box and loading in the main browser tab.
And you'd probably face the same problem with any other iframe solution. So that would work better with locally served pages.
Sorry for the length, my problem is very simple, but specific.
I'm building a wordpress site that automatically imports image galleries from a Tumblr account, then styles and displays them. The backend is finished, and all that I need now is have all images in posts be displayed as thumbnail sized links. They are not behaving well with the importer (I've tried 6), so I have to edit the HTML display (rather than the images as they are uploaded).
I have decided to do this by applying class="attachment-thumbnail size-thumbnail" on all images on the site (in HTML). I have tested this and they will open the proper gallery in a lightbox as necessary so long as they belong to those two classes.
I have a two part problem.
I do not know PHP past basic syntax, and while I can intuit most of what is happening I don't trust myself to edit Wordpress source code without understanding exactly what I am breaking.
From other answers I've learned that I should most likely edit the wp_insert_attachment() function in post.php under wp_includes/. I have found the function, but don't really know where to go from there, as it does not appear to be specific to image attachments. I don't want to throw any errors by assinging image classes to non-image attachments. How do I add those two classes (attachment-thumbnail and size-thumbnail) to all post images (and only images)?
There is a single exception to this rule. I want a large image on the homepage, and have it not be a link.
It seems like the way to handle this would be to allow page attachments to be handled normally, while attachments that are both images and attached to posts should trigger this:
if [attachment is an image AND is on a post, not a page]:
<img src="https://whatever">
becomes
<img src="https://whatever" class="attachment-thumbnail size-thumbnail">
tl; dnr: ^^ that's all I need to happen, in PHP, in the right file, in Wordpress ^^
Thanks!
So likely you will want to do it via php but instead you could do it with javascript ie jQuery:
<script>
$(function() {
$("body img").addClass("attachment-thumbnail size-thumbnail");
});
</script>
Put that on any page or site header and it will add the class to all images. You can modify the search filter to suit.
You might need to re-call your lightbox initialization code too, or put this before it gets called initially.
Newbie to programming here! I'm completing a project with pretty basic HTML/CSS files, and I'm using Atom as my editor. Both the HTML and CSS files are validated with no errors, and the page can be previewed fine in both Atom HTML preview, and in Chrome.
I have two images in the HTML file that I uploaded to Flickr so that I may submit my project for review via CodePen. When I plug in the new img src code for CodePen, they show up as broken image links.
For example, the below code works fine in Atom HTML as well as Chrome browser Preview (using upticks instead of brackets for ease of viewing post):
'img src="lizatdesk.png" class="image" alt="graphic of Liz sitting at her desk"'
And this is my link assigned by Flickr and plugged into CodePen - results in a broken link (using upticks instead of brackets for ease of viewing post):
'img src="https://flic.kr/p/QFZVZp" class="image" alt="graphic of Liz sitting at her desk"'
Can someone help?
https://flic.kr/p/QFZVZp does not point to an image. It points to an HTML page. To show a photo stored on Flickr you must use the URL of the photo; see this FAQ. In your case, that's https://c1.staticflickr.com/1/255/31957771213_4ed09e18b1_o.png. And per the Flickr terms of use you must also provide a link back to Flickr.
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).