Embed Video + Thumbnails für weiter Videos

xXxJBExXx · 12. September 2011

Hallo

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

es sollte ca. so aussehen

(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. September 2011

keiner eine Idee ?

Back2toxic · 14. September 2011

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:

<!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. September 2011

versteh ich nicht ganz :/

bis jetzt siehts so aus :

HTML:

<!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>

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. September 2011

so ich habs ein wenig hingekriegt

wo ich noch hilfe brauche:

- wenn ich ein thumbnail anklicke und dannach noch eins soll das letzte verschwinden

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

Embed Video + Thumbnails für weiter Videos

xXxJBExXx

Grünschnabel

xXxJBExXx

Grünschnabel

Back2toxic

Erfahrenes Mitglied

xXxJBExXx

Grünschnabel

xXxJBExXx

Grünschnabel

Neue Beiträge