Embed Video + Thumbnails für weiter Videos @ tutorials.de: Tutorials, Forum & Hilfe

xXxJBExXx · 12.09.11 21:25

Hallo

ich will auf meiner Webseite einen "work"-bereich einrichten wo ich meine Arbeiten als Videos posten kann

es sollte ca. so aussehen

http://h7.abload.de/img/text_videopageuunr.jpg (in PS gemacht, die rechte Info Box is nicht dringend wäre aber dennoch cool

)

Bis jetzt ist es so mit dem VideoLightBox-modul ...

Die Aktuelle Seite!

Ich glaube es wird mit einem OnClick-Event gemacht oder ?! ich kenne mich leider nicht mit javascript und ajax aus :/ nur mit html/css

Danke im Voraus

mfg

pulse

xXxJBExXx · 13.09.11 17:32

keiner eine Idee ?

Back2toxic · 14.09.11 14:18

Du hast oben einen Content, unten Previews.
Kopier dir bei Klick auf die Previews den Inhalt in deinen Content et voilà - Fertig ist das ganze.
Frei nach folgendem Prinzip:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
	<script type="text/javascript">
		function copyContent(id,main){
			main = main ? main : 'mainContent';
			id = document.getElementById(id);
			main = document.getElementById(main)
			
			var headline = childExists('mainHeadline', 'h1', main);
			headline.innerHTML = id.getElementsByTagName('span')[0].innerHTML;
			
			var img = childExists('mainImage', 'img', main);
			img.src = id.getElementsByTagName('img')[0].src;
			
			var text = childExists('mainText', 'span', main);
			text.innerHTML = id.getElementsByTagName('span')[1].innerHTML;
		}
		
		function childExists(id, type, container){			
			var element = document.getElementById(id);
			if(!element){
				element = document.createElement(type);
				element.id = id;
				container.appendChild(element);		
			}
			return element;
		}
		
		window.onload = function(){
			copyContent('preview1');
		}
	</script>
  </head>
  <body>
  	<div id='mainContent'></div>
		<div id='preview1' onclick="copyContent(this.id);"><img src='thumb_preview1'><span class='bottomline'>Preview1</span><span class='hidden'>Text 1</span></div>
		<div id='preview2' onclick="copyContent(this.id);"><img src='thumb_preview2'><span class='bottomline'>Preview2</span><span class='hidden'>Text 2</span></div>
		<div id='preview3' onclick="copyContent(this.id);"><img src='thumb_preview3'><span class='bottomline'>Preview3</span><span class='hidden'>Text 3</span></div>
		<div id='preview4' onclick="copyContent(this.id);"><img src='thumb_preview4'><span class='bottomline'>Preview4</span><span class='hidden'>Text 4</span></div>
		<div id='preview5' onclick="copyContent(this.id);"><img src='thumb_preview5'><span class='bottomline'>Preview5</span><span class='hidden'>Text 5</span></div>
		<div id='preview6' onclick="copyContent(this.id);"><img src='thumb_preview6'><span class='bottomline'>Preview6</span><span class='hidden'>Text 6</span></div>
  </body>
</html>

xXxJBExXx · 14.09.11 16:57

versteh ich nicht ganz :/

bis jetzt siehts so aus :

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pulse</title>
<link href="*.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<script type="text/javascript">
		function copyContent(id,main){
			main = main ? main : 'mainContent';
			id = document.getElementById(id);
			main = document.getElementById(main)
			
			var headline = childExists('mainHeadline', 'h1', main);
			headline.innerHTML = id.getElementsByTagName('span')[0].innerHTML;
			
			var img = childExists('mainImage', 'img', main);
			img.src = id.getElementsByTagName('img')[0].src;
			
			var text = childExists('mainText', 'span', main);
			text.innerHTML = id.getElementsByTagName('span')[1].innerHTML;
		}
		
		function childExists(id, type, container){			
			var element = document.getElementById(id);
			if(!element){
				element = document.createElement(type);
				element.id = id;
				container.appendChild(element);		
			}
			return element;
		}
		
		window.onload = function(){
			copyContent('preview1');
		}
	</script>
</head>
<body style="background-image:url(images/bg_1.jpg);">

<div id="wrapper">
  <div id="header">
    	<div id="logo"><a href="index.php" alt="pulse"><img src="http://www.tutorials.de/images/logo_1.png" width="100" height="100" alt="pulse"></a></div>    	
        <div id="menu">
        		<a alt="" href="index.php" class="menu"><div class="menu">HOME</div></a>  
                <a alt="" href="work.html" class="menu_on"><div class="menu_on_bg">WORK</div></a>
        	 	<a alt="" href="about.php" class="menu"><div class="menu">ABOUT</div></a>
                <a alt="" href="contact.php" class="menu"><div class="menu">CONTACT</div></a>
                
        		      
        </div>    
    </div>
    
<center><img src="http://www.tutorials.de/images/line.jpg" width="750" height="1"></center>


<div id="content">

		<div id='preview1' onclick="copyContent(this.id);"><img src='0.png'><span class='bottomline'>Divinity</span><span class='hidden'>Text1</span></div>
		<div id='preview2' onclick="copyContent(this.id);"><img src='0.png'><span class='bottomline'>Preview2</span><span class='hidden'>Text 2</span></div>
		<div id='preview3' onclick="copyContent(this.id);"><img src='0.png'><span class='bottomline'>Preview3</span><span class='hidden'>Text 3</span></div>
		<div id='preview4' onclick="copyContent(this.id);"><img src='0.png'><span class='bottomline'>Preview4</span><span class='hidden'>Text 4</span></div>
		<div id='preview5' onclick="copyContent(this.id);"><img src='0.png'><span class='bottomline'>Preview5</span><span class='hidden'>Text 5</span></div>
		<div id='preview6' onclick="copyContent(this.id);"><img src='0.png'><span class='bottomline'>Preview6</span><span class='hidden'>Text 6</span></div>


</div>


<center><img src="http://www.tutorials.de/images/line.jpg" width="750" height="1"></center>

<div id="footer">
	
  <img src="http://www.tutorials.de/images/logo_2.png" alt="pulse" style="float:left">
  
  
  </div>



</div>


</body></html>

http://s1.directupload.net/images/110914/y7rsk63l.png

er weiß doch garnicht wohin mit den daten oder ?

ich stell es mir so vor das im "onclick" immer z.B. steht "copyContent(1513287);" diese zahl kopiert er dann in den embed code von vimeo, welcher über den bildern steht:

<iframe src="http://player.vimeo.com/video/1513287?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>

außerdem soll er nicht die ganze seite neu laden und er soll wenn man auf die seite geht immer ein "standart" video haben ...

und muss das "onclick"-event nicht in ein <a> ?

xXxJBExXx · 15.09.11 15:48

so ich habs ein wenig hingekriegt

wo ich noch hilfe brauche:

- wenn ich ein thumbnail anklicke und dannach noch eins soll das letzte verschwinden :P und er soll gestoppt werden damit der ton nicht weitergespielt wird
im moment stapeln sich die videos aufeinander

- dann soll noch am anfang immer das erste video schon angezeigt werden

Testseite: http://www.load.to/s9qosSwuvO/test.rar

wäre nett wenn ihr mit helfen könntet

mfg

pulse

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Video Embed Plugins

PowerPoint Videos laufen nicht weiter nach bisherigen Besuch.

Thumbnails aus Video

Forms mit Weiter-Button weiter schalten

Stichworte

E-Mail:

Abonnieren Abbestellen