Bootstrap Lighbox - how to add caption with link? - twitter-bootstrap-3

I would like some of my Lightbox gallery images to have a caption with a link to another website. And if the caption link can open up in a new window/tab like the target="_blank" style. But I have no idea how to do this. Could I have some help please? Thanks in advance :)
Code for one gallery image:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
I have read somewhere I could use data attributes, so I tried data-href:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here" data-href="http://mylinkgoeshere">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
But of course that didn't work since I don't really know what data-href does so I was just guessing :( I did look up about it but I guess my coding level isn't good enough so I don't understand it ^^;
Lightbox.css:
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 4px;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

Related

Can't make CSS Animations work with #keyframes and position relative/absolute

I am trying to practice simple CSS Animations with Keyframes.
I am trying to move the square from left to right, however, this does not seem to be working with position relative/absolute. I works when I do transform: translateX(...) or something similar, but not with the aforementioned method. Any ideas why?
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: relative;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
So, in the Keyframes you had right
100% {
top: 0px;
right: 500px;}
where as it needed to be left
100% {
top: 0px;
left: 500px;}
full code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: reletive;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 500px;
/*here*/
}
}

FlexSlider Arrows working but not visible

I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).
All I managed to do so far was removing the frame around the arrows.
Any idea what could be wrong?
Link to the new LP
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
#media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
You lose Font Awesome css, which is required as the nav arrow.
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.

Change pseudo element color on selected state

I want to change arrow color as well as circle when click on it. I am using LESS and getting right place to add border-top-color: #0066ff; Can anyone suggest please? Here is code:
LESS:
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
}
&:after {
top: 104%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #ff6600;
border-width: 10px;
margin-left: -10px;
transform: scaleY(1.6);
&.selected {
border-top-color: #0066ff;
}
}
}
HTML:
<div class="circle"></div>
JS:
$(document).ready(function(){
$('.circle').on('click', function(){
$(this).addClass('selected');
});
});
JS fiddle is here:
https://jsfiddle.net/kunjsharma/6eu431hp/1/
You need to put :after inside .selected: see this fiddle
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
&:after { // <-- moved this inside .selected
border-top-color: #0066ff;
}
}
// rest of the styles...
}

How to disable v-tooltip when user click outside

I use v-tooltip to show tooltip on every cell of table
<td v-tooltip="{content: 'some content', trigger: 'click'}"></td>
But I want when user click another cell, current tooltip will disapear, I have tried "autoHide" property, but it not working.
Thanks
v-tooltip repository:
https://github.com/Akryum/v-tooltip
It's a late answer but maybe it can help someone else:
you can add the tooltip component as a ref and call the hide method:
this.$refs.popover.hide()
I think you will have to use the more customizable v-popover component. The v-tooltip directive doesn't seem to handle manual triggering, and you need manual triggering.
console.clear();
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
selectedCell: null
}
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
<script src="//unpkg.com/popper.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/v-tooltip"></script>
<div id="app">
<table border="1">
<tr v-for="i in 3">
<td #click="selectedCell = i">
<p><span>This is cell {{ i }}</span></p>
<v-popover trigger="manual" :open="selectedCell === i">
<template slot="popover">
<p>
{{ message }}
</p>
</template>
</v-popover>
</td>
</tr>
</table>
</div>

IE 10 vertically stretching images?

heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox