I've already bought Tile Lighbox
Purchased on Code Canyon: 9b9999e9-6f55-4311-800f-ef911ae854c9 - 6 Nov 2021
Hi,
I can't get the Openpanel href to work. When the image is clicked on I want the following to display: https://www.stognerautosales.com/inventory-stogner-auto-sales.
The following is the code I'm using:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TileBox - Demo 1 - Responsive Tile LightBox CSS</title>
<meta name="description" content="TileBox - Demo 1 - Responsive Tile Lightbox CSS" />
<link href='http://fonts.googleapis.com/css?family=Dosis|Open+Sans' rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate-custom.css" type="text/css" />
<!-- TileBox CSS Pack -->
<link rel="stylesheet" href="css/tilebox-css.css" type="text/css" />
</head>
<body>
<div class="floatleft shadow-red demo-img-frame">
<label for="openpanel" class="ctrlitem">
<img src="images/demo/openpanel-thumbnail.png" alt="openpanel" class="demo-img" />
</label>
</div>
<!-- START OPENPANEL BOX -->
<input type="checkbox" id="openpanel" class="tilebox">
<div class="img-orange-2 animated box-rotateIn box-content">
<!-- Start Control Buttons -->
<div>
<!-- Start Close Button -->
<label for="openpanel" class="box-closebt light-border solid-red">
<img src="images/demo/close.png" alt="close" />
</label>
<!-- End Close Button -->
<!-- Start Fitsize Button -->
<label for="fitsize-openpanel" class="box-fitsizebt light-border solid-green">
<img src="images/demo/fit-size.png" alt="fit-size" />
</label>
<!-- End Fitsize Button -->
<!-- Start Info Button -->
<label for="openpanel-info" class="box-infobt light-border solid-blue-2">
<span class="light-text">i</span>
</label>
<!-- End Info Button -->
</div>
<!-- End Control Buttons -->
<!-- Start Image Zone -->
<input type="checkbox" id="fitsize-openpanel" class="fitsize">
<article class="box-img">
<!-- Start Large Image -->
<div class="main-img">
<img src="images/demo/demo-2.jpg" alt="" class="shadow-black" />
</div>
<!-- End Large Image -->
</article>
<!-- End Image Zone -->
<!-- Start Info Zone -->
<input type="checkbox" id="openpanel-info" class="box-info">
<article class="box-info-content animated box-fadeInLeftBig solid-black top-red-border">
<label for="openpanel-info" class="info-closebt solid-red">
<img src="images/demo/down.png" alt="close" />
</label>
<p class="info-title light-text">
<a href="https://www.stognerautosales.com/inventory-stogner-auto-sales" target="_blank">OPENPANEL</a>
</p>
<p class="light-text">
OpenPanel is a jQuery plugin that allows you to open panel at any where in your page, unlimited panels as you want and support for responsive design. With this small plugin you can open more space for your site to add anything you want.
</p>
</article>
<!-- End Info Zone -->
</div>
<!-- END OPENPANEL BOX -->
</div>
<!-- END TILEBOX STATION -->
<div class="clearspace"></div>
</div>
</body>
</html>
What am I doing wrong?
Hi,
I checked the script you posted and it works. However, if you want to add href to the main image you need a little change. You need to add the href to the image not the text (you can show the text with the added href by clicking on the blue button at the top right corner). You can try to replace this section in your script to add a href to the main image:
<!-- Start Large Image -->
<div class="main-img">
<img src="images/demo/demo-2.jpg" alt="" class="shadow-black" />
</div>
<!-- End Large Image -->
By this one:
<!-- Start Large Image -->
<a class="main-img" href="https://www.stognerautosales.com/inventory-stogner-auto-sales" target="_blank">
<img src="images/demo/demo-2.jpg" alt="" class="shadow-black" />
</a>
<!-- End Large Image -->
Hope this can help to solve your issues.
Kind regards,