I'm trying to link a series of images together I know the basic HTML Code for linking 1 image to another would be
<!DOCTYPE html>
<html>
<head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<a href="Imagelink1">
<img alt="" src="Imagelink2"
>
</a>
</body>
</html>
But I'm trying to continue the chain from Imagelink2 to Imagelink3 to Imagelink4 and so on.
How would I go about doing that?
it's not possible to do that. You have to create a link for each image.
Example below:
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<a href="Imagelink1">
<img src="Imagelink1" alt="">
</a>
<a href="Imagelink2">
<img src="Imagelink2" alt="">
</a>
<a href="Imagelink3">
<img src="Imagelink3" alt="">
</a>
</body>
</html>
Is that what you're looking for?
img {
display: block;
width: 200px;
height: 200px;
margin: 0 auto 500px;
}
<!DOCTYPE html>
<html>
<head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<a href="#img2">
<img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-674010.jpg&fm=jpg" id="img1" alt="" />
</a>
<a href="#img3">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" id="img2" alt="" />
</a>
<a href="#img1">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg" id="img3" alt="" />
</a>
</body>
</html>
Related
This is the skeleton of most of my websites I like to create. I would like to be able to add image links instead of having to reference photos on my computer. I was hoping to get some help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>$title$</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap template</h1>
<p>$text$</p>
<footer class="blog-footer">
<p>Made by Kevin Leong</p>
<a target="_blank" href="#"><img src="/assets/social-icons/facebook_icon.png" width="30" height="30" class="img-fluid"></a>
<a target="_blank" href="#"><img src="/assets/social-icons/twitter-icon.png" width="30" height="30" class="img-fluid"></a>
<a target="_blank" href="#"><img src="/assets/social-icons/instagram.png" width="30" height="30" class="img-fluid"></a>
<a target="_blank" href="#"><img src="/assets/social-icons/linked-in-icon.png" width="30" height="30" class="img-fluid"></a>
<a target="_blank" href="#"><img src="/assets/social-icons/pinterest-icon.png" width="30" height="30" class="img-fluid"></a>
<a target="_blank" href="#"><img src="/assets/social-icons/flickr-icon.png" width="30" height="30" class="img-fluid"></a>
</footer>
</div>
</body>
</html>
You can reference external images like this:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/321px-Aster_Tataricus.JPG" />
Right click on any image online and select copy image address, then paste it in the src="" of an img element. But only use images from places like https://commons.wikimedia.org/ and https://www.pexels.com/ that give you permission to use their images.
Firstly, I have this view on table:
when I click the td, it opens the PrettyPhoto Lightbox
on prettyPhoto, the default html trigger is:
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>
but instead I have this html:
<a href="image.jpeg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="http://wasapbro-2019.test/storage/msg/cupb1RUgcGLnUovQi7eBpxLIIRu37sPKcha1jjuI.jpeg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
on mine that fails to trigger
How do I solve this?
I am not sure how you are initializing PrettyPhoto, but I set up this quick demo using your DOM structure and it seems to work just fine. One thing to note is that you need to use jQuery version 2.x or older since PrettyPhoto relies on .size(); which isn't available in jQuery 3.0+.
$(document).ready(function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
<!DOCTYPE html>
<html>
<head>
<title>Pretty Photo</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/css/prettyPhoto.min.css" type="text/css" media="screen" charset="utf-8" />
<script src="https://lib.arvancloud.com/ar/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table>
<tr>
<td>
<a href="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="https://live.staticflickr.com/8183/8079715772_f003d725d1_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" data-rel="prettyPhoto" rel="prettyPhoto[pp_gal]" class="kt-user-card-v2">
<div class="kt-user-card-v2__pic">
<img src="https://live.staticflickr.com/8512/8509212953_4cfefc8b9a_z.jpg" class="m-img-rounded kt-marginless" alt="photo">
</div>
<div class="kt-user-card-v2__details">
<span class="kt-user-card-v2__name">test</span>
</div>
</a>
</td>
</tr>
</table>
</body>
</html>
I used to have an hyperlink that is anchored to an image.
But I now when I click the image it needs to zoom in first so I used Fancy box, then the zoom in image must have the link.
Is it possible? Here is my code below
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<a href="image.jpg" data-fancybox data-caption="www.google.com" data-width="2048" data-height="1365">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</a>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
For future reference, it is possible but you need to create a form for your fancy box and not a direct image.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<img class="fancybox" src="thumbnail.jpg" alt="" />
<div id="divForm" style="display:none">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</div>
<script type="text/javascript">
$("#btnForm").fancybox();
</script>
</body>
</html>
I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
My lightbox gallery is working perfectly offline but i've just uploaded it online at it's not working at all, clicking on images just takes you to a new page.
Here is the page ... www.jevonz.co.uk/portfolio.html
The file paths seem to be fine and I've even switched from locally hosting jquery to using the google hosted one but all to no avail. Any help would be much appreciated. Cheers!
Here's the code for the page if that gives any more info.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Jevonz.css" rel="stylesheet" type="text/css">
<link href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"> </script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1" align="center">
<img src="images/JevonzHeader.jpg"/>
</div><!-- end LayoutDiv1 -->
<div id="Navigation" align="center">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
<!-- end Navigation -->
<div id="galleria" align="center">
<img src="images/gallery/Thumbnails/bio_thumb.jpg" width="200" height="200" alt="Bioluminescence" />
<img src="images/gallery/Thumbnails/blueRobot_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/DeepSea_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/DiD_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/EscapeLife_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/GorillaLarge_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/LifeRobot_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/LureDeep_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/TangledFamily_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/WorldBelow_thumb.jpg" width="200" height="200" alt="" />
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</div>
</div>
<!-- end gridContainer -->
</body>
</html>
You are getting 403 Forbidden errors on the lightbox files, I have posted a screenshot of the Net panel in firebug:
http://cl.ly/image/2m461v012M1i
Check the permissions on that folder and make sure that the webserver can read that folder and its contents.