video lightbox links on a circle not working

Question

I am trying to use code examples found here: Position icons into circle

in combination with a video lightbox plugin for wordpress. The two seem to be negating each other.

I need to place images in a rough oval around a central logo and have each video be a link that opens a youtube video with a lightbox effect.

I cannot seem to figure out why the two things are breaking each other.

Advice on how to accomplish this would be greatly appreciated.

code is as follows...

HTML:

    <!--[if lt IE 9]><div class="circle-container lt-ie9"><![endif]-->
<!--[if gte IE 9]><!--><div class="circle-container"><!--<![endif]-->

    <a href="http://americanindustrialinc.com/wp/wp-content/uploads/2015/04/placeholder.jpg" class="center"><img src="http://americanindustrialinc.com/wp/wp-content/uploads/2015/04/ProcessVideoThumb-e1428063665849.png"></a>
    <a href="https://www.youtube.com/watch?v=A1imGeNf8r0"
rel="wp-video-lightbox" class="deg0"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg"></a>
    <a href="https://www.youtube.com/watch?v=DbZR9o29kI8"
rel="wp-video-lightbox" class="deg45"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg"></a>
    <a href="https://www.youtube.com/watch?v=rDsZ2iWfYME"
rel="wp-video-lightbox" class="deg135"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg"></a>
    <a href="https://www.youtube.com/watch?v=x_9Me6z2CZQ"
rel="wp-video-lightbox" class="deg180"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg"></a>
    <a href="https://www.youtube.com/watch?v=Xn8uK-T0Fmg"
rel="wp-video-lightbox" class="deg225"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg"></a>
    <a href="https://www.youtube.com/watch?v=torOo6h1_jM"
rel="wp-video-lightbox" class="deg315"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg"></a>

</div>

CSS:

 /*images in a circle*/

.circle-container {
    position: relative !important;
    width: 24em !important;
    height: 24em !important;
    padding: 2.8em !important; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: dashed 0px !important;
    border-radius: 50% !important;
    margin: 1.75em auto 0 !important;
}
.circle-container a {
    display: block !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 50%; left: 50% !important;
    width: 4em; height: 4em !important;
    margin: -2em !important; /* 2em = 4em/2 */ /* half the width */
} 
.circle-container img { display: block !important; width: 100% !important; }
.deg0 {
    -webkit-transform: rotate(20deg) translate(12em) rotate(-85deg) !important
    -moz-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
    -ms-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
    -o-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
    transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
} /* 12em = half the width of the wrapper */
.lt-ie9 .deg0 {
    margin-left: 10em; !important
}
.deg45 {
    -webkit-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
    -moz-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
    -ms-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
    -o-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
    transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
}
.lt-ie9 .deg45 {
    margin: 6.485em !important;
}
.deg135 {
    -webkit-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
    -moz-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
    -ms-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
    -o-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
    transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
}
.lt-ie9 .deg135 {
    margin: 6.485em -10.485em !important;
}
.deg180 {
    -webkit-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
    -moz-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
    -ms-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
    -o-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
    transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
}
.lt-ie9 .deg180 {
    margin-left: -14em !important; 
}
.deg225 {
    -webkit-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
    -moz-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
    -ms-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
    -o-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
    transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
}
.lt-ie9 .deg225 {
    margin: -10.485em !important;
}
.deg315 {
    -webkit-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
    -moz-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
    -ms-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
    -o-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
    transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
}
.lt-ie9 .deg315 {
    margin: -10.485em 6.485em !important;
}

/* this is just for showing the angle on hover */
.circle-container a:not(.center):before {
    position: absolute;
    width: 4em;
    color: white;
    opacity: 0;
    background: rgba(0,0,0,.5);
    font: 1.25em/3.45 Courier, monospace;
    letter-spacing: 2px;
    text-decoration: none;
    text-indent: -2em;
    text-shadow: 0 0 .1em deeppink;
    transition: .7s; /* only works in Firefox */
    content: attr(class)'°';
}
.circle-container a:hover:before { opacity: 1; }

/* this is for showing the circle on which the images are placed */
.circle-container:after {
    position: absolute;
    top: 2.8em; left: 2.8em;
    width: 24em; height: 24em;
    border: dashed 0px deeppink;
    border-radius: 50%;
    opacity: .3;
    pointer-events: none;
    content: '';
}
.circle-container:hover:after { opacity: 1; }
.circle-container a:not(.center):after {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 .5em .5em white;
    margin: -2px;
    background: deeppink;
    opacity: .3;
    content: '';
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }

/*end circle of images*/

My limited experience is not finding a solution. please help.

I have tried many things (including replacing quotations (") with single ticks (') as used in the referenced thread. I have tried removing support for older IE versions.

browser i am testing in is chrome. also tested in FF.

testpage is http://americanindustrialinc.com/circlepage/

score 0 · Answer 1 · answered Apr 30 '15 at 01:13

0

I am an idiot. The entire problem was that i accidentally put line breaks in each anchor string.

answered Apr 30 '15 at 01:13

user4571

1
1

video lightbox links on a circle not working

1 Answers1