4 Replies - 2642 Views - Last Post: 13 December 2012 - 09:12 PM

#1 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Using an Image Gallery for a Youtube Embedded Gallery?

Posted 11 December 2012 - 01:59 AM

Hey Guys!

I'm back, with a new problem on a new day, except...I've tried multiple things before coming to you guys.

Problem:
Using an Image Gallery (I found a nice image gallery online free of charge so I'm using it)as a video gallery (videos embedded from youtube)

Gallery Code
<!doctype html>
<html>
<head>
<link rel=stylesheet href=g.css>

<title>Gallery</title>
</head>
<body>
<a href="index.html">Home</a>
<span id=1>
<span id=2>
<span id=3>
<span id=4>

<a data-paginate href=#1></a>
<a data-paginate href=#2></a>
<a data-paginate href=#3></a>
<a data-paginate href=#4></a>

<a data-dir=l href=#1></a>
<a data-dir=l href=#2></a>
<a data-dir=l href=#3></a>

<a data-dir=r href=#2></a>
<a data-dir=r href=#3></a>
<a data-dir=r href=#4></a>

<span>
<img src=1.jpg>
<img src=2.jpg>
<img src=3.jpg>
<img src=4.jpg>
</span>

</span>
</span>
</span>
</span>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br /><br />
<br />
<br />
<br />
<br />
<br />
<center>
Youtube Backgrounds I have done
<a href="index.html">Home</a>
<br />

</center>
</body>
</html>





CSS

body {
  background:rgb(28,28,28);
}
[id="1"] {
  overflow:hidden;
  position:absolute;
  top:50%;
  left:50%;
  width:800px;
  height:450px;
  margin:-260px 0 0 -400px;
  border-radius:10px;
  -webkit-box-shadow:0 1px 7px #000;
  box-shadow:0 1px 7px #000;
}
[id="1"]:hover a {
  opacity:1;
}
[id="1"]:target [data-paginate][href$="1"],
[id="2"]:target [data-paginate][href$="2"],
[id="3"]:target [data-paginate][href$="3"],
[id="4"]:target [data-paginate][href$="4"] {
  background-position:0 0;
}
[id="1"]:target *+span {
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translateX(0);
}
[id="2"]:target *+span {
  -webkit-transform:translate3d(-800px,0,0);
  -moz-transform:translateX(-25%);
}
[id="3"]:target *+span {
  -webkit-transform:translate3d(-1600px,0,0);
  -moz-transform:translateX(-50%);
}
[id="4"]:target *+span {
  -webkit-transform:translate3d(-2400px,0,0);
  -moz-transform:translateX(-75%);
}
[id="2"] {
  display:block;
  height:100%;
  -webkit-mask-box-image:url(mask.png);
}
[id="2"]::before {
  content:"";
  width:100%;
  height:100%;
  background:url(border.png);
  pointer-events:none;
}
[id="2"]::before, a {
  position:absolute;
  z-index:1;
}
a {
  opacity:0;
  -webkit-transition:opacity .8s cubic-bezier(0,0,.4,1);
  -moz-transition:opacity .8s cubic-bezier(0,0,.4,1);
}
[data-paginate] {
  left:356px;
  bottom:15px;
  width:16px;
  height:17px;
  background:url(dots.png) no-repeat 0 100%;
}
[data-paginate][href$="2"] {
  left:381px;
}
[data-paginate][href$="3"] {
  left:405px;
}
[data-paginate][href$="4"] {
  left:429px;
}
[data-dir] {
  top:200px;
  background:url(arrows.png);
  width:29px;
  height:29px;
  visibility:hidden;
}
[data-dir]:active {
  -webkit-transform:translateY(1px);
  -moz-transform:translateY(1px);
}
[data-dir="l"] {
  left:30px;
  background-position:0 100%;
}
[data-dir="r"] {
  right:30px;
}
[id="1"]:target [data-dir="r"][href$="2"],
[id="2"]:target [data-dir="l"][href$="1"],
[id="2"]:target [data-dir="r"][href$="3"],
[id="3"]:target [data-dir="l"][href$="2"],
[id="3"]:target [data-dir="r"][href$="4"],
[id="4"]:target [data-dir="l"][href$="3"] {
  visibility:visible;
}
*+span {
  display:block;
  width:3200px;
  -webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.2,1);
  -moz-transition:-moz-transform 1s cubic-bezier(0,0,.2,1);
}
img {
  float:left;
}




I've tried changing around the CSS to try suit for videos...not really sure what to do

As the website I got this from didn't explain the CSS I'm a little stuck as to what to do :| so if anyone has the time to go through with some of what it means it'd be much appreciated!

Thanks
Brent

Is This A Good Question/Topic? 0
  • +

Replies To: Using an Image Gallery for a Youtube Embedded Gallery?

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Using an Image Gallery for a Youtube Embedded Gallery?

Posted 12 December 2012 - 03:25 AM

Hello there,

Without looking through the code on any detailed extent, I would imagine you are looking for two completely different things (code wise). An image gallery will, on a simple level, just be changed the source of an image where as for a YouTube gallery, you will be editing a flash object path.

I would suggest either looking for an already built YouTube gallery on the internets or harnessing the power of the YouTube API/web tools to figure out how to manipulate embedded YouTube videos.
Was This Post Helpful? 0
  • +
  • -

#3 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: Using an Image Gallery for a Youtube Embedded Gallery?

Posted 12 December 2012 - 07:17 PM

View PostKruithne, on 12 December 2012 - 03:25 AM, said:

Hello there,

Without looking through the code on any detailed extent, I would imagine you are looking for two completely different things (code wise). An image gallery will, on a simple level, just be changed the source of an image where as for a YouTube gallery, you will be editing a flash object path.

I would suggest either looking for an already built YouTube gallery on the internets or harnessing the power of the YouTube API/web tools to figure out how to manipulate embedded YouTube videos.

Last I had heard, and excuse me if this has changed, the Youtube API was discontinued for this type of gallery...and the image gallery I have looks to be entirely capable of being used as a video viewer, I'll take another look at the code and see what I can do...
Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Using an Image Gallery for a Youtube Embedded Gallery?

Posted 13 December 2012 - 02:19 AM

Hello again,

It might well be discontinued, but the principal is still the same. Although the image viewer "may" be capable of being used for videos, you will be better making one suited to modifying the parameters of a YouTube video widget rather than making an image gallery suit.
Was This Post Helpful? 0
  • +
  • -

#5 BrentisHere  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 18-October 12

Re: Using an Image Gallery for a Youtube Embedded Gallery?

Posted 13 December 2012 - 09:12 PM

View PostKruithne, on 13 December 2012 - 02:19 AM, said:

Hello again,

It might well be discontinued, but the principal is still the same. Although the image viewer "may" be capable of being used for videos, you will be better making one suited to modifying the parameters of a YouTube video widget rather than making an image gallery suit.

Hey,

I am working on just making one for myself...it'll give me the knowledge I need to know, but, I'm trying to figure out if I make it all css or apply some jquery (I think that might work)

anyways,
I'll let you know how it goes
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1