9 Replies - 637 Views - Last Post: 18 August 2016 - 05:50 PM

#1 RodTrotter   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 17-August 16

Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 17 August 2016 - 04:23 AM

Hi Guys,

I am trying to do some modifications on a template (html+css) and on part of the template is gallery of thumbnails that
1) Change colour when you highlight them
2) Launch a popup slideshow/gallery when clicked on

What I'm trying to do is remove the slideshow/gallery and instead use a hyperlink to a new page. So a user would click on the image and it would take him to a new page. I have tried modifying the code with a href hyperlink but will only work if I right click and open the image in new tab. The hyperlink I applied to the text is fine. I have included the HTML from two of the thumbnails/buttons from the page and also the CSS from below (have only add hyperlinks to the first thumbnail). Am new to CSS so please forgive me if this is something really obvious. Thanks. Rod.

<div class="container">
        <div class="row">
            <article class="col-lg-12 col-md-12 col-sm-12 galleryBox">
                <h2>Pump services</h2>
                    <div class="row">
                        <article class="col-lg-4 col-md-4 col-sm-4">
                            <div class="thumb-pad9">
                                <div class="thumbnail maxheight">
                                    <figure><a href="test.html"><img src="img/page3_pic1.jpg" alt=""></a></figure>
                                    <div class="caption">
                                        <a href="test.html">Hyperlinkone</a>
                                        <p>This is the link for the new page.</p>
                                    </div>
                                </div>
                            </div>
                        </article>
                        <article class="col-lg-4 col-md-4 col-sm-4">
                            <div class="thumb-pad9">
                                <div class="thumbnail maxheight">
                                    <figure><a href="img/img2.jpg"><img src="img/page3_pic2.jpg" alt=""></a></figure>
                                    <div class="caption">
                                        <a href="#">Control Panels</a>
                                        <p>Aenean nonummy hendrerit mauris. Phasellus porta. usce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient.</p>
                                    </div>
                                </div>
                            </div>
                        </article>


.thumb-pad9 {
	padding-bottom: 30px;
	overflow: hidden;
}
.thumb-pad9:hover .thumbnail {
	background: #FF5D40;
}
.thumb-pad9:hover figure {
	border-color: #E9E9E9;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.thumb-pad9:hover .caption p {
	color: #FFFFFF;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.thumb-pad9:hover .caption a {
	color: #FFFFFF !important;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.thumb-pad9 .thumbnail {
	position: relative;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: none;
	overflow: hidden;
	padding: 30px 30px 32px 30px;
	background: #EAEAEA;
	border-radius: 8px;
}
.thumb-pad9 figure {
	margin: 0;
	margin-bottom: 24px;
	border: 1px solid #EAEAEA;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.thumb-pad9 figure img {
	width: 100%;
}
.thumb-pad9 .thumbnail .caption {
	padding: 0;
	color: #9F9F9F;
}
.thumb-pad9 .thumbnail .caption p {
	font-weight: bold;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.thumb-pad9 .thumbnail .caption a {
	font: 16px 'Cabin', Arial, Helvetica, sans-serif;
	color: #363636;
	display: inline-block;
	margin-bottom: 19px;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.thumb-pad9 .thumbnail .caption a:hover {
	text-decoration: underline;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Removing Lightbox gallery and adding hyperlink to thumbnails

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15799
  • View blog
  • Posts: 63,297
  • Joined: 12-June 08

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 17 August 2016 - 06:35 AM

Why wouldn't you just clear out all of that junk and just do a static image and link per normal html?
Was This Post Helpful? 0
  • +
  • -

#3 RodTrotter   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 17-August 16

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 17 August 2016 - 10:55 AM

View Postmodi123_1, on 17 August 2016 - 06:35 AM, said:

Why wouldn't you just clear out all of that junk and just do a static image and link per normal html?

I guess I could just use tables instead but was wondering whether there was a way using the existing css by removing what activates the slideshow. Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 17 August 2016 - 02:09 PM

The slideshow is probably done with Javascript. You could do a simplistic one in pure CSS but I it would require at least the :active pseudo-class and I don't see it in your code.
Was This Post Helpful? 0
  • +
  • -

#5 RodTrotter   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 17-August 16

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 18 August 2016 - 05:35 AM

Hi guys, thanks for the replies but that wasn't quite what I was looking to do.

What I am trying to do is remove the slideshow. So no slideshow popup and instead just a normal hyperlink to the new page. I have added the hyperlink to the image. The hyperlink is there, and if I highlight the image, right click, open in new window, the new page opens. However, if I just click the image (left click), the slideshow pops up.

I have pasted the HTML again below. This is for 2 images in the grid.


<div class="container">
        <div class="row">
            <article class="col-lg-12 col-md-12 col-sm-12 galleryBox">
                <h2>Pump services</h2>
                    <div class="row">
                        <article class="col-lg-4 col-md-4 col-sm-4">
                            <div class="thumb-pad9">
                                <div class="thumbnail maxheight">
                                    <figure><a href="test.html"><img src="img/page3_pic1.jpg" alt=""></a></figure>
                                    <div class="caption">
                                        <a href="test.html">Hyperlinkone</a>
                                        <p>This is the link for the new page.</p>
                                    </div>
                                </div>
                            </div>
                        </article>
                        <article class="col-lg-4 col-md-4 col-sm-4">
                            <div class="thumb-pad9">
                                <div class="thumbnail maxheight">
                                    <figure><a href="img/img2.jpg"><img src="img/page3_pic2.jpg" alt=""></a></figure>
                                    <div class="caption">
                                        <a href="#">Control Panels</a>
                                        <p>Aenean nonummy hendrerit mauris. Phasellus porta. usce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient.</p>
                                    </div>
                                </div>
                            </div>
                        </article>





Thanks again for any help. Rod.
Was This Post Helpful? 0
  • +
  • -

#6 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 18 August 2016 - 06:35 AM

My answer wasn't very clear: there must be a script overriding the behaviour of the links. Since it is not achieved with CSS, you can't sort this out by editing the CSS only.

Removing stuff from a script is not difficult, even if you don't know shit about Javascript, so don't freak out ;)
Was This Post Helpful? 0
  • +
  • -

#7 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 18 August 2016 - 07:01 AM

Somewhere in the head there is a link to a js file that gives you your slideshow. Start by checking for that and commenting it out, for now.
Was This Post Helpful? 0
  • +
  • -

#8 RodTrotter   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 17-August 16

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 18 August 2016 - 07:16 AM

View Postge∅, on 18 August 2016 - 06:35 AM, said:

My answer wasn't very clear: there must be a script overriding the behaviour of the links. Since it is not achieved with CSS, you can't sort this out by editing the CSS only.

Removing stuff from a script is not difficult, even if you don't know shit about Javascript, so don't freak out ;)/>

Ahh that makes sense. Any idea which one it would be from below? I can see the reference to thumb-pad9 but not sure which script it would be. Thanks for your help by the way.

<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/TMForm.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.equalheights.js"></script> 
<script src="js/jquery.ui.totop.js"></script>
<script src="js/touchTouch.jquery.js"></script>
<script>
   $(window).load(function() {
     // Initialize the gallery
    $('.thumb-pad9 figure a').touchTouch();
  });
</script>
<!--[if lt IE 9]>
<div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>  
<link rel="stylesheet" href="assets/tm/css/tm_docs.css" type="text/css" media="screen">
<script src="assets/assets/js/html5shiv.js"></script> 
<script src="assets/assets/js/respond.min.js"></script>
<![endif]-->

Was This Post Helpful? 0
  • +
  • -

#9 ge∅   User is offline

  • D.I.C Lover

Reputation: 319
  • View blog
  • Posts: 1,335
  • Joined: 21-November 13

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 18 August 2016 - 07:30 AM

The description make it obvious that this is the code you need to remove. You will also want to remove the library touchTouch.jquery.js (unless it is also used elsewhere)
Was This Post Helpful? 0
  • +
  • -

#10 RodTrotter   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 17-August 16

Re: Removing Lightbox gallery and adding hyperlink to thumbnails

Posted 18 August 2016 - 05:50 PM

View Postge∅, on 18 August 2016 - 07:30 AM, said:

The description make it obvious that this is the code you need to remove. You will also want to remove the library touchTouch.jquery.js (unless it is also used elsewhere)



done and done.

Thanks for all your help :clap:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1