Video Gallery

apileggi · March 19, 2007

Could you please advise me how I could get additional videos side by side. I am pretty sure 2 videos can fit next to each other. Also, do I need a separate code not to show the photo for each video section?

example;
.gallery_2565002 #albumNav_top,
.gallery_2565002 #albumNav_bottom,
.gallery_2565002 #photos,
.gallery_2565002 .nophotos {display: none;}
.gallery_2595244 #albumNav_top,
.gallery_2595244 #albumNav_bottom,
.gallery_2595244 #photos,
.gallery_2595244 .nophotos {display: none;}
.gallery_2567472 #albumNav_top,
.gallery_2567472 #albumNav_bottom,
.gallery_2567472 #photos,

Also, any recommendations would be appreciated.

Thanks, Armand

apileggi.smugmug.com

Andy · March 19, 2007

apileggi wrote:

Could you please advise me how I could get additional videos side by side. I am pretty sure 2 videos can fit next to each other.

sure:

<html><div align="center"><p><embed src="http://www.youtube.com/v/hpkgAj0cFEI" type="application/x-shockwave-flash" width="425" height="350"></embed><embed src="http://www.youtube.com/v/hpkgAj0cFEI" type="application/x-shockwave-flash" width="425" height="350"></embed></p></div></html>

that's example code.
http://andydemo.smugmug.com/gallery/2601330

Also, do I need a separate code not to show the photo for each video section?[/QUOTE]

Only for each gallery.

apileggi · March 19, 2007

Andy,

I can't get your video gallery to load. I am looking for similar layout below.

http://zmommy.smugmug.com/gallery/2522582

Thanks,

Armand

Andy wrote:

sure:

<html><div align="center"><p><embed src="http://www.youtube.com/v/hpkgAj0cFEI" type="application/x-shockwave-flash" width="425" height="350"></embed><embed src="http://www.youtube.com/v/hpkgAj0cFEI" type="application/x-shockwave-flash" width="425" height="350"></embed></p></div></html>

that's example code.
http://andydemo.smugmug.com/gallery/2601330

Also, do I need a separate code not to show the photo for each video section?

Only for each gallery.[/quote]

apileggi · March 19, 2007

Thanks Andy! I've got it.

apileggi wrote:

Andy,

I can't get your video gallery to load. I am looking for similar layout below.

http://zmommy.smugmug.com/gallery/2522582

Thanks,

Armand

Only for each gallery.

[/quote]

Andy · March 19, 2007

viewing source on zmommy page, I see this:

<html>


<div class="qtVideo1">
<p class="title" id="videoTitle">The Haircut Begins</p>
<div class="embedVid">
<OBJECT 
   CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
   WIDTH="320" 
   HEIGHT="256" 
   CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
   <PARAM name="SRC"        VALUE = "http://zmommy.smugmug.com/photos/128912970-O.jpg">
   <PARAM name="QTSRC"      VALUE = "http://zmommy.smugmug.com/photos/128912970-O.jpg">
   <PARAM name="HREF"       VALUE = "http://homepage.mac.com/cdwjones/.Movies/haircut/MVI_0483.mov">
   <PARAM name="AUTOPLAY"   VALUE = "true"               >
   <PARAM name="CONTROLLER" VALUE = "true"               >
   <PARAM name="TYPE"       VALUE = "video/quicktime"    >
   <PARAM name="TARGET"     VALUE = "myself"             >
   <EMBED 
        SRC        = "http://zmommy.smugmug.com/photos/128912970-O.jpg"
        QTSRC      = "http://zmommy.smugmug.com/photos/128912970-O.jpg"
        HREF       = "http://homepage.mac.com/cdwjones/.Movies/haircut/MVI_0483.mov" 
        TARGET     = "myself"
        CONTROLLER = "true"
        WIDTH      = "320" 
        HEIGHT     = "256" 
        LOOP       = "false" 
        AUTOPLAY   = "true" 
        PLUGIN     = "quicktimeplugin" 
        TYPE       = "video/quicktime" 
        CACHE      = "false" 
        PLUGINSPAGE= "http://www.apple.com/quicktime/download/" >
   </EMBED>
</OBJECT>
</div>
<div class="videoInfo">
<p class="caption" id="videoCaption"></p>
<p class="videoLink">
<a class="nav" href="http://#"></a></p>
</div>
</div>

<div class="qtVideo1">
<p class="title" id="videoTitle">Are You a Treasure?</p>
<div class="embedVid">
<OBJECT 
   CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
   WIDTH="320" 
   HEIGHT="256" 
   CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
   <PARAM name="SRC"        VALUE = "http://zmommy.smugmug.com/photos/128912963-O.jpg">
   <PARAM name="QTSRC"      VALUE = "http://zmommy.smugmug.com/photos/128912963-O.jpg">
   <PARAM name="HREF"       VALUE = "http://homepage.mac.com/cdwjones/.Movies/haircut/MVI_0482.mov">
   <PARAM name="AUTOPLAY"   VALUE = "true"               >
   <PARAM name="CONTROLLER" VALUE = "true"               >
   <PARAM name="TYPE"       VALUE = "video/quicktime"    >
   <PARAM name="TARGET"     VALUE = "myself"             >
   <EMBED 
        SRC        = "http://zmommy.smugmug.com/photos/128912963-O.jpg"
        QTSRC      = "http://zmommy.smugmug.com/photos/128912963-O.jpg"
        HREF       = "http://homepage.mac.com/cdwjones/.Movies/haircut/MVI_0482.mov" 
        TARGET     = "myself"
        CONTROLLER = "true"
        WIDTH      = "320" 
        HEIGHT     = "256" 
        LOOP       = "false" 
        AUTOPLAY   = "true" 
        PLUGIN     = "quicktimeplugin" 
        TYPE       = "video/quicktime" 
        CACHE      = "false" 
        PLUGINSPAGE= "http://www.apple.com/quicktime/download/" >
   </EMBED>
</OBJECT>
</div>
<div class="videoInfo">
<p class="caption" id="videoCaption"></p>
<p class="videoLink">
<a class="nav" href="http://#"></a></p>
</div>
</div>

<div class="qtVideo1">
<p class="title" id="videoTitle">What a Good Girl!</p>
<div class="embedVid">
<OBJECT 
   CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
   WIDTH="320" 
   HEIGHT="256" 
   CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
   <PARAM name="SRC"        VALUE = "http://zmommy.smugmug.com/photos/128912973-O.jpg">
   <PARAM name="QTSRC"      VALUE = "http://zmommy.smugmug.com/photos/128912973-O.jpg">
   <PARAM name="HREF"       VALUE = "http://homepage.mac.com/cdwjones/.Movies/haircut/MVI_0484.mov">
   <PARAM name="AUTOPLAY"   VALUE = "true"               >
   <PARAM name="CONTROLLER" VALUE = "true"               >
   <PARAM name="TYPE"       VALUE = "video/quicktime"    >
   <PARAM name="TARGET"     VALUE = "myself"             >
   <EMBED 
        SRC        = "http://zmommy.smugmug.com/photos/128912973-O.jpg"
        QTSRC      = "http://zmommy.smugmug.com/photos/128912973-O.jpg"
        HREF       = "http://homepage.mac.com/cdwjones/.Movies/haircut/MVI_0484.mov" 
        TARGET     = "myself"
        CONTROLLER = "true"
        WIDTH      = "320" 
        HEIGHT     = "256" 
        LOOP       = "false" 
        AUTOPLAY   = "true" 
        PLUGIN     = "quicktimeplugin" 
        TYPE       = "video/quicktime" 
        CACHE      = "false" 
        PLUGINSPAGE= "http://www.apple.com/quicktime/download/" >
   </EMBED>
</OBJECT>
</div>
<div class="videoInfo">
<p class="caption" id="videoCaption"></p>
<p class="videoLink">
<a class="nav" href="http://#"></a></p>
</div>
</div>

</html>

richW · March 19, 2007

Armand, Here is some more info on the videos: http://www.dgrin.com/showthread.php?t=50722&page=2#14
I'm going out for a while, when I get back I'll check your gallery and give you a hand. Here are a couple of samples that are about the same size as your videos.
http://lmsportspix.smugmug.com/gallery/2263392
http://lmsportspix.smugmug.com/gallery/2557105

apileggi · March 20, 2007

Thanks so much!

Would you know how I could hide film strip jpeg on this page http://apileggi.smugmug.com/Video%20Clips

and keep the title on Gallery page.
http://apileggi.smugmug.com/galleries

Thanks again,
Armand

richW wrote:

Armand, Here is some more info on the videos: http://www.dgrin.com/showthread.php?t=50722&page=2#14
I'm going out for a while, when I get back I'll check your gallery and give you a hand. Here are a couple of samples that are about the same size as your videos.
http://lmsportspix.smugmug.com/gallery/2263392
http://lmsportspix.smugmug.com/gallery/2557105

richW · March 20, 2007

apileggi wrote:

Thanks so much!

Would you know how I could hide film strip jpeg on this page http://apileggi.smugmug.com/Video%20Clips

and keep the title on Gallery page.
http://apileggi.smugmug.com/galleries

Thanks again,
Armand

While viewing the image "feature it", then move the image to the private gallery where you keep your site images. I'm putting together the code for your videos, I hope it won't take too long....

richW · March 20, 2007

This will put 4 videos into a gallery description. You can add or remove the amount of videos you want.
Copy the code from  to  and paste it below your last video or remove it.
Replace the video id in the embed code with your video's id.
If you are going to use four videos copy and paste as-is and replace the video id's

<!-- start video 1 -->
<div class="videoBox2">
<div class="videoTitle2">Your title for Video 1</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=Lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>
<!-- end video 1 -->


<!-- start video 2 -->
<div class="videoBox2">
<div class="videoTitle2">Your title for Video 2</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=Lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>
<!-- end video 2 -->


<!-- start video 3 -->
<div class="videoBox2">
<div class="videoTitle2">Your title for Video 3</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=Lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>
<!-- end video 3 -->


<!-- start video 4 -->
<div class="videoBox2">
<div class="videoTitle2">Your title for Video 4</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=Lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>
<!-- end video 4 -->

Place this in your css section. Make sure you replace the x's with your gallery number.

.gallery_xxxxxx #albumDescription {
text-align: center;
padding: 25px;}

.videoTitle2 {
margin: 10px 0;
color: white;}

.videoBox2 {
border: solid 1px #fff;
text-align: center;
display: inline;
float: left;
width: 425px;
height: auto;
margin: 0px 13px 30px 13px;
overflow: hidden;}

.gallery_xxxxxx .smugmug_small .videoBox2 {width: 690px;}

Let's see if this is close to what you are looking for......

apileggi · March 20, 2007

Rich,

I tried your code and the video doesn't play. I moved my titles to the top and I think I am going to keep this layout. I will leave your code here for a while if you want to look at it.

My videos are smaller only because the quality of the video isn't very good. I guess when I get a better camera, I will increase the size.

Let me know what you think.

Thanks

Armand

richW wrote:
This will put 4 videos into a gallery description. You can add or remove the amount of videos you want.
Copy the code from  to  and paste it below your last video or remove it.
Replace the video id in the embed code with your video's id.
If you are going to use four videos copy and paste as-is and replace the video id's

<div class="videoBox2">
<div class="videoTitle2">Your title for Video 1</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>

 
 

<div class="videoBox2">
<div class="videoTitle2">Your title for Video 2</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>

 
 

<div class="videoBox2">
<div class="videoTitle2">Your title for Video 3</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>

 
 

<div class="videoBox2">
<div class="videoTitle2">Your title for Video 4</div>
<div class="video2">
<embed src="http://www.motionbox.com/external/player/id=[COLOR=lime]xxxxxxxxxxxxxx[/COLOR]" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="425" height="460"></embed>
</div>
</div>

Place this in your css section. Make sure you replace the x's with your gallery number.

.gallery_xxxxxx #albumDescription {
text-align: center;
padding: 25px;}

.videoTitle2 {
margin: 10px 0;
color: white;}

.videoBox2 {
border: solid 1px #fff;
text-align: center;
display: inline;
float: left;
width: 425px;
height: auto;
margin: 0px 13px 30px 13px;
overflow: hidden;}

.gallery_xxxxxx .smugmug_small .videoBox2 {width: 690px;}

Let's see if this is close to what you are looking for......

Video Gallery

Comments