Jeg nappede indholdet i nederste højre hjørne på jsFiddle - og fiflede med det : )
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Kvægdemo by mortenhauberg</title>
<script type='text/javascript' src='http;//code.jquery.com/jquery-1.6.2.js'></script>
<!-- ved ikke hvad de 2 nedenstående er... Noget Fiddlehalløj måske? -->
<!--link rel="stylesheet" type="text/css" href="/css/normalize.css"-->
<!--link rel="stylesheet" type="text/css" href="/css/result-light.css"-->
<style type='text/css'>
#Explain
{
background-color: #FFF;
height:25px;
font-size: 20px;
padding:0 4px;
}
#alt-text
{
float:left;
font-style:italic;
}
#close_img
{
float: right;
cursor: pointer;
}
#Pagination
{
color: #FFF;
text-align:center;
}
#Pagination p
{
display: inline;
cursor: pointer;
}
#show_img
{
width: auto;
cursor: pointer;
}
#Gallery
{
position: relative;
}
#Gallery > img
{
max-height: 150px;
cursor: pointer;
}
#img_box
{
vertical-align:middle;
display:table-cell;
}
#img_bg
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:10;
}
#middle
{
height:100%;
display:table;
margin:0 auto;
}
.hide
{
display: none;
}
</style>
<script type='text/javascript'>
var images = null;
var total = 0;
var current = 0;
var winH = $(window).height(); // hvad hvis brugeren resizer vinduet ?
var winW = $(window).width();
var border = 100;
var winHeight = winH - border;
var winWidth = winW - border;
$(document).ready(function() // alt HTML+script er loadet - klargør jQuery funktioner
{
$('.thumb').click(function()
{
$('#img_bg').fadeIn();
$('#middle').fadeIn();
$('#img_box').fadeIn();
var group = $(this).attr('data-group');
$('#alt-text').html( $(this).attr('data-text') );
images = $("#Gallery").find('img[data-group='+group+']'); // images er global - bruges også i next/prev
current = $('img[data-group='+group+']').index(this); // current er global (erstatter både showImg og numberImg)
thisImg = images.eq(current).attr('src');
$('#show_img').attr('src', thisImg);
var orgImgWidth = $('#show_img').width();
var orgImgHeight = $('#show_img').height();
if(orgImgHeight >= winHeight || orgImgWidth >= winWidth)
$('#show_img').animate({ height: winHeight }, 1000 ); // hvad med meget brede (lave) billeder ?
total = images.length; // total er global - bruges også i next/prev
if (total > 1)
{
$('#Pagination').show();
$('#Page').html(current + 1);
$('#total').html(total);
}
else
$('#Pagination').hide();
})
$('#Next, #Prev').click(function()
{
var $nav = $(this).attr('id');
// Både current og total er globale - genbrug er godt
if ($nav == "Next") // før "Nex" = altid den anden : )
{
if(current == total - 1)
current = 0;
else
current = current + 1;
}
else
{
if (current == 0)
current = total - 1;
else
current = current - 1;
}
$('#Page').html(current + 1);
var text = images.eq(current).attr('data-text');
$('#alt-text').html(text);
$('#show_img').css("display", "none");
$('#show_img').css("height", "");
var img = images.eq(current).attr('src');
$('#show_img').attr('src',img).fadeIn();
orgImgHeight = $('#show_img').height();
if (orgImgHeight >= winHeight)
$('#show_img').animate( {height: winHeight}, 1000 );
});
$('#show_img,#close_img').click(function ()
{
$('#img_bg').fadeOut(); // river alle de indre med
/*
$('#img_box').fadeOut();
$('#middle').fadeOut();
$('#show_img').css("height", "");
$('#Pagination').fadeOut();
*/
});
});
</script></head><body>
<div id="Gallery">
<img data-group="111" class="thumb" data-text="Maren" src="http;//2.bp.blogspot.com/-CXFfl9luHPM/TV-Os6opQfI/AAAAAAAAA2E/oCgrgvWqzrY/s1600/cow.jpg" />
<img data-group="111" class="thumb" data-text="Mille" src="http;//www.thelibertyvoice.com/wp-content/uploads/2011/06/52cow.jpg"/>
<br/><br/>
<img data-group="QQQ" class="thumb" data-text="Johnny" src="http;//filuren.dk/wp-content/uploads/cow-1.jpg"/>
<img data-group="QQQ" class="thumb" data-text="Karl" src="http;//slothsandmovies.com/images/cow_large.jpg"/>
<img data-group="QQQ" class="thumb" data-text="Mini" src="http;//madmikesamerica.com/wp-content/uploads/2010/11/wisconsin-milk-cow.jpg"/>
<img data-group="QQQ" class="thumb" data-text="Kvik" src="http;//www.thetwentyfirstfloor.com/main/wp-content/uploads/2011/02/cow3.jpg"/>
<img data-group="QQQ" class="thumb" data-text="Lis 1+2" src="http;//1.bp.blogspot.com/-3QSgXPbk1f4/Td1RiyrkyaI/AAAAAAAAD3k/tamo23XG_VA/s1600/cow1.jpg"/>
<img data-group="QQQ" class="thumb" data-text="Elvira" src="http;//nextnature.net/wp-content/uploads/2008/07/world_cow_530.jpg"/>
<br/><br/>
<img data-group="QWE" class="thumb" data-text="Herrene" src="http;//img.dailymail.co.uk/i/pix/2008/05_03/bigcowBNS_468x334.jpg"/>
</div>
<div id="img_bg" class="hide" style="display: none">
<div id="middle" class="hide" style="display: none">
<div id="img_box" class="hide" style="display: none">
<img src="" id="show_img" title="Klik for at lukke" />
<div id="Explain">
<span id="alt-text"></span>
<span id="close_img">X</span>
</div>
<div id="Pagination" class="hide">
<p id="Prev">« Forrige</p>
(<span id="Page"></span>/<span id="total"></span>)
<p id="Next">Næste »</p>
</div>
</div>
</div>
</div>
</body></html>
Der var en del lokal/global flimmer - og mulighed for genbrug (og dermed forenkling)
- ellers har jeg (næsten) holdt mig i skindet, det er stadig din struktur (ånd) : )
En del class="xyz" er lavet om til "id="xyz" fordi class er til genbrug, id til det unikke.
PS: Ret ";" i alle "http;//" til ":" En lille Eksperten.dk quirk..
