 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 04.09.2009 17:15
Titel
|
  |
|
Ich arbeite ja nicht besonders gerne mit jQuery, trotzdem mal als kleiner Anreiz:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>uh</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fadebox').after('<div id="img_full"></div>');
$('#fadebox a').click(function() {
var img_full = this.href;
$('#img_full').fadeOut(function() {$('#img_full').html('<img src="' + img_full + '" alt="" />'); $('#img_full').fadeIn();});
return false;
});
});
</script>
</head>
<body>
<div id="fadebox">
<a href="http://www.damnyeah.de/files/showcase/2009/p_1251717709.jpg"><img src="http://www.damnyeah.de/files/showcase/2009/t_1251717709.jpg" id="n1" alt="" /></a>
<a href="http://www.damnyeah.de/files/showcase/2009/p_1251717742.jpg"><img src="http://www.damnyeah.de/files/showcase/2009/t_1251717742.jpg" id="n2" alt="" /></a>
<a href="http://www.damnyeah.de/files/showcase/2009/1251717892.jpg"><img src="http://www.damnyeah.de/files/showcase/2009/t_1251717892.jpg" id="n3" alt="" /></a>
</div>
</body>
</html> |
|
|
| |
   |
 |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 09.09.2009 13:23
Titel
|
|
|
Ich hatte die letzten Tage keine Zeit mehr mich hiermit zu beschäftigen.
Danke nochmal an m für den Tipp mit dem String bzw Integer Wert.
Dein erstes Script enthielt jedoch einen Fehler.
Die Variablendeklaration darf nicht in den Funktionen geschehen die durch klicken auf 'vor' bzw 'zurueck' gestartet werden.
Das Script muß dann so ausehen
| Code: | <!doctype html>
<html lang="de">
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">@import "css/style2.css";</style>
<script type="text/javascript" src="library/jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('img').mouseover(function(){
$(this).css('cursor','pointer');
});
$('.small').click(function(){
var $id = $(this).attr("id");
$id = parseInt($id.substr(1));
$('.lightBox').fadeIn('slow').css('display','block');
$('#n' + $id + 'b').fadeIn('slow').css('display','block');
$('.zurueck').click(function(){
$image = 'n' + $id + 'b';
$idPrev = $id - 1;
$imagePrev = 'n' + $idPrev + 'b';
$('#' + $image).css('display','none');
$('#' + $imagePrev).fadeIn('slow');
$id = $idPrev;
});
$('.vor').click(function(){
$image = 'n' + $id + 'b';
$idNext = $id + 1;
$imageNext = 'n' + $idNext + 'b';
$('#' + $image).css('display','none');
$('#' + $imageNext).fadeIn('slow');
$id = $idNext;
});
$('.lightBox > img').click(function(){
$('.lightBox').fadeOut('slow');
$(this).css('display','none');
});
});
});
//-->
</script>
</head>
<body>
<div id="wrapper">
<div>
<img class="small" src="images/thumb/test.jpg" id="n1" alt="test.jpg" title="test.jpg">
<img class="small" src="images/thumb/test01.jpg" id="n2" alt="test01.jpg" title="test01.jpg">
<img class="small" src="images/thumb/test02.jpg" id="n3" alt="test02.jpg" title="test02.jpg">
<img class="small" src="images/thumb/test.jpg" id="n4" alt="test.jpg" title="test.jpg">
<img class="small" src="images/thumb/test01.jpg" id="n5" alt="test01.jpg" title="test01.jpg">
<img class="small" src="images/thumb/test02.jpg" id="n6" alt="test02.jpg" title="test02.jpg">
<div class="lightBox">
<img src="images/test.jpg" id="n1b" alt="test.jpg" title="test.jpg">
<img src="images/test01.jpg" id="n2b" alt="test01.jpg" title="test01.jpg">
<img src="images/test02.jpg" id="n3b" alt="test02.jpg" title="test02.jpg">
<img src="images/test.jpg" id="n4b" alt="test.jpg" title="test.jpg">
<img src="images/test01.jpg" id="n5b" alt="test01.jpg" title="test01.jpg">
<img src="images/test02.jpg" id="n6b" alt="test02.jpg" title="test02.jpg">
<br />
<span class="z"><a class="zurueck" href="#"><</a></span><span class="v"><a class="vor" href="#">></a></span>
</div>
</div>
<br style="clear:left;">
</div>
</body>
</html>
|
|
|
| |
|
|
|
Anzeige
|
|
|
ApfelQFeierabend
Dabei seit: 05.04.2008
Ort: Regensburg
Alter: 37
Geschlecht:
|
Verfasst Mi 09.09.2009 22:41
Titel
|
|
|
irgendwie verstehe ich bei euren ansätzen nicht wie das maximum bzw das minimum der id werte limitiert. hier ein etwas schlankerer ansatz von mir
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style type="text/css">
li {
float: left;
display: block;
}
#preview {
display: none;
position: absolute;
z-index: 100;
margin-top: 100px;
padding: 20px;
border: 1px solid #CCC;
background-color: gray;
}
#preview img{
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<!--
function change_picture(nr){
$('#preview #prev, #preview #next').unbind("click", navi_change);
nr = parseInt(nr);
bigimg = $("ul li a:eq("+nr+")").attr("href");
$('#preview img').attr("src", bigimg);
if(nr != 0)
$('#preview #prev').attr("rel", nr-1);
if(nr != ($('ul li a').length-1))
$('#preview #next').attr("rel", nr+1);
$('#preview #prev, #preview #next').bind("click", navi_change);
}
function navi_change(){
if($(this).attr('rel') != NaN)
change_picture($(this).attr('rel'));
}
$(document).ready(function(){
$('ul li a').click(function(){
change_picture($('ul li a').index(this));
$('#preview').fadeIn();
return false;
});
$('#preview #close').click(function(){
$('#preview').fadeOut();
});
});
//-->
</script>
</head>
<body>
<ul>
<li><a href="http://www.huddletogether.com/projects/lightbox2/images/image-1.jpg"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-1.jpg" alt="" /></a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-2.jpg" alt="" /></a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/images/image-3.jpg"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-3.jpg" alt="" /></a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/images/image-4.jpg"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/images/image-5.jpg"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a></li>
</ul>
<div id="preview">
<a id="close">x</a>
<img src="" alt="" />
<a id="prev"><</a> <a id="next">></a>
</div>
</body>
</html> |
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Werte in PDF aus InDesign addieren...
Javascript: Werte addieren mit parseInt()
[Javascript] Addieren
DB Ausgabe addieren
Array addieren
[Excel-Makros] Definierte Zellen addieren
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
