I followed all steps on the Lightbox website. But whenever I click on the image it just opens up in a new page.
<head>
<link href="path/to/lightbox.css" rel="stylesheet">
</head>
I dont have jquery so I used lightbox-plus-jquery.js.
Also here is the code for displaying the image.
<script src="path/to/lightbox-plus-jquery.js" type="text/javascript"> </script>
</body>
<img src="images/pics04.jpg" width="250" height="200" alt="">
Plus how do I display text when the image is clicked?
Thanks
I had the same issue. I did not follow the directions completely. It says to place the script tag linking to the lightbox at the bottom of the page just above the body tag. I put mine in the head with the rest and it did not work. Moving the script tag for the lightbox down to the bottom just above the closing body tag should solve your problem.
You need to replace the 'path/to' bit in the code with your actual path (i.e. location of the file)
Related
I'm trying to run a script within a specific div only. With my current code, the script affects the image outside of the div as well. I'm using this code on wordpress within a html widget and when I insert the script code, it effects the entire page. I only want it to apply the specific html widget. This is also the reason I want to insert the script within a div, as I want to avoid adding the script to the actual web page (if possible).
Any help or work around would be greatly appreicated.
<html>
<head></head>
<body>
<div>
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js">
</script>
<img src="https://i.imgur.com/I63emp4.jpg" height="160">
</div>
<img src="https://imgur.com/0VWBThm.jpg" height="160">
</body>
</html>
Sorry if my question is trivial, I am a beginner and am not quite sure how to approach this problem.
I am writing a blog that has a MENU bar at the top of the page. Since I don't want to update all menus on every html page, I wish to source the containing my menu from a different html page.
I have tried using an iframe or frameset, but those will unfortunately cut my dropdown menu off at the bottom. This means I either have to remove those or make a frame so large that it is large enough for the dropdowns, but that will squish the rest of the page down. Also, if I clicked any of the menu options, the page that would be updated would be the frame itself :|.
I was therefore wondering if it is possible to call a small portion of pre-existing code into an html file? I have also tried the .load() function of JQuery, but even simple tutorials don't seem to work for me.
Does anyone know a way to either import the div into an html file, or a way to get my .load() function to work? I have added the .load() tutorial I used below.
PAGE THAT CONTAINS THE DIV
<html>
<head>
</head>
<body>
<p>This is demo text.<p>
</body>
</html>
PAGE THAT RECEIVES THE DIV
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#content').load("new.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Build the menu as a PHP file, then pull it in using an include function:
<?php include("/yourMenu.php"); ?>
It's that simple. Changing /yourMenu.php will change it on every page. Hope that helps!
Hello amazing people in here!
My Goal: Display a Bunch of images neatly on
http://1110kd.blogspot.in/
using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)
Progress till now:
step 1: Pasted JS files in head section
step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images
Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(
Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).
[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]
Thank you so much in advance.
Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/
First, when I try your link, the first thing I see is the following image.
You have to fix this before trying to do something else.
A possible solution will be to use a CDN instead.
So to resume, here's a possible template:
<!DOCTYPE html>
<html>
<head>
GooglebaseData goes here ...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
</head>
<body>
All your content
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$("#basicExample").justifiedGallery();
</script>
</html>
With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>
<HTML>
<Head>
<Title>My Test</Title>
<script src="http://someurl.com/test.js"></script>
</Head>
<Body>
This is for test
</Body>
</HTML>
Above mentioned is my HTML code. When I right click my page & hit "view source" I can see exact same code.
But what my requirement is, instead of <script>...</script> I want actual javascript code from test.js should be displayed when I am hitting "view source".
I tried to put it in iframe, but it didn't worked.
What you want is impossible to achieve with HTML and an external JS file.
There is no way to make View Source show anything other than the actual source code of the URL.
If you want to look at the JavaScript source code, then look at the URL for the JavaScript. Most browsers will hyperlink it in View Source to make it easy to do.
If you really want the JS to be displayed as part of the source of the HTML document, then you have to make it part of the HTML document. Remove the src attribute and copy the contents of the JS file to between the start and end tag of the script element.
add a <script> tag in the <head> section
<script src="path/to/test.js"></script>
I used a image gallery engine called prettyPhoto.js in a WordPress site that I was creating. However, for some strange reason the image gallery seems to have completely stopped working and I can't for the life of me find out how to rectify this problem (without explicitly going through the entire site and stripping out the rel="prettyphoto" tags embedded in all the image anchor links.
I am wondering if the javascript or the CSS is not being output to the browser properly, but taking a look at the "Net" panel in firebug, it seems to be loading these files without a problem. I tried having a look at the <a> link referencing the images to be opened, and they all had the required "prettyPhoto" attribute.
The page in question is
http://instant-wine-cellar.co.uk/products/microcellar and try clicking on any of the microcellar pictures.
Another is the "Watch Microcellar Video" link on the front page.
For those who do not know. This image gallery script, same with a lot of others, works by:
1. putting the prettyPhoto javascript file in your server.
2. putting the prettyPhoto css file in your server.
3. referencing the path to the above files into the head (or footer) of your html file.
4. triggering the process by putting some bespoke script into your HTML file to find the <a> tags in your file with a certain rel attribute and opening the link it references, into the prettyPhoto modal box.
At first include jquery.js then plugin.
Find:
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Replace:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>