Heips!
Millä määrittelyillä kuvan saa aukeamaan samalla tavalla kuin ao. linkissä? Eli että kuva suurenee, muttei aukea uudelle sivulle. Lähdekoodia ja tyylitiedostoa tutkimalla en saanut juuri mitään saloja selville.
Jos riittää että se suurenee, ettei tarvitse aueta juuri noin, niin vilkase näitä.
http://www.lokeshdhakar.com/projects/lightbox2/
http://fancybox.net/
Kiitos nopeasta vastauksesta, näillä päästäneen eteenpäin. :)
Älkää tehkö noita, pliis. Ne on suunnattoman ärsyttäviä.
Tämäkin mallina oleva implementaatio rikkoo heti ne mun kolme eniten käyttämää selaimen ominaisuutta: Klikkaan kuvaa keskinapilla ajatuksena avata se taustalle uuteen tabiin. No ei aukea kun se ei ole linkki vaan Opera yrittää surffata sinne, mitä leikepöydällä sattuu olemaan. Jos se ei ole URL, niin se tekee Google-haun sillä. Ja sitten mua potuttaa suunnattomasti.
Toinen keissi on se, että klikkaan kuvan suureksi sillä ykkösnapilla, katon sen ja sitte haluan kattoa seuraavan kuvan. No, teen hiirieleen "edelinen sivu" ja selain menee johonkin ihan muualle kuin siihen galleriasivulle. Ja taas mua potuttaa suunnattomasti.
Kolmas keissi on se, että avaan kuvan ja siinä on mielestäni jotain jännää, ja haluan jakaa sen muille. Kopioin osoterivin sisällön ja heitän sen irkkiin/Facebookkiin/jonneki ja sen linkin takaa löytyykin galleria, eikä se kuva, mihin halusin linkata. Ja taas mua potuttaa suunnattomasti.
Ja huomatkaa, etten edes valittanu siitä, että en näe isoja kuvia ollenkaan, jos en käy sallimassa Javascriptiä tuolle domainille.
Olen Blazen kanssa samaa. Voisihan joku kehittää vielä noita, ja muutella sitä osoiteriviä location.hashilla, tai jollain jQuery-vastineella. Senkin voi kyllä estää, ja silloinhan se ei toimisi.
Miksei noi muuten ole linkkejä? Eikös noissa oletuksena opeteta esimerkeissäkin, että isoon kuvaan tarjoillaan linkkiä, mutta javaScriptillä avataan kuva Fancyboxissa/Lightboxissa.
Tällöin kuvaan pystyy jakamaan linkkiä, sen pystyy avaamaan uuteen täbiin ja lisäksi halutessaan kuvia voi selata Fancyboxin/lightboxin omilla nuolipainikkeilla.
edit:
Enemmän tuossa pisti silmään se, että Grillin "kuvagalleriassa" oli kuvat täyskokoisina ja pienennetty "html:llä".
Tuossa myös yksi malli/tapa toteuttaa tuollainen, josta voi sitten vaikkapa rakentaa oikeasti toimivan systeemin.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Lightbox esimerkki</title>
<style type="text/css">
* {
margin: 0em;
padding: 0em;
}
/* Tausta divi */
.lightbox {
display: none; /* Piiloitetaan divi oletuksena */
width: 100%; /* Divi ruudunkokoiseksi */
height: 100%;
top: 0em;
left: 0em;
position: fixed;
z-index: 100;
background:rgba(0,0,0,.35); /* Kokoruudun kokoinen divi läpinäkyväksi */
}
/* Kun divi on ns "kohdistettu" tuodaan se näkyviin
*
* Eli kun osoite on muotoa ..tamatiedosto.html#lightbox
*/
.lightbox:target {
display: block;
-webkit-animation: displayIn 1s linear;
-moz-animation: displayIn 1s linear;
}
/* CSS3 animaatiot
*
* Toimii:
* Safari, Chrome ja firefox (5 tai uudempi)
*
*/
@-webkit-keyframes displayIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes displayIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Sisältöalue */
.lightboxContent {
width: 40em;
margin: 0em auto;
position: fixed;
top: 10em;
left: 0em;
right: 0em;
bottom: 10em;
z-index: 110;
background-color: #fff;
}
</style>
<script type="text/javascript">
/**
* Javascript ajax hässäkkä jolla haetaan näytettävä kuva lighboxiin
* Kannattaa lukea putkan opas ajaxista, jos ei ennestään kokemusta
*
* https://www.ohjelmointiputka.net/oppaat/opas.php?tunnus=ajax
*/
var Request;
function constructRequest() {
if (window.ActiveXObject) {
Request = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
Request = new XMLHttpRequest();
}
}
/**
* $id lähetetään php -tiedostoon get -parametrinä jonka perusteella haetaan haluamasi kuva.
*/
function activeRequest(id) {
constructRequest();
Request.onreadystatechange = exportRequest;
/* Osoite jossa sijaitsee php -tiedostosi josta kuva haetaan */
Request.open("GET", "http://localhost/kuva.php?id="+id, true);
Request.send(null);
}
function exportRequest() {
if (Request.readyState == 4) {
if (Request.status == 200) {
/* elementti johon haettu tieto tulostetaan */
document.getElementById("lightboxpicture").innerHTML=Request.responseText;
} else {
alert('virhe!');
}
}
}
</script>
</head>
<body>
<!-- Linkki josta aukaistaan lightboxi ja tehdään ajax haku -->
<a href="#avaakuva1" onClick="activeRequest('1');">Näytä kuva</a>
<!-- Sit tämmösen vois vaikka tarjoilla kans jos haluaa -->
<a href="kuva.php?id=1" target="_blank">Näytä uudella tabilla</a>
<!-- "Lightbox" johon kuva aukeaa -->
<div class="lightbox" id="avaakuva1">
<div class="lightboxContent">
<div id="lightboxpicture"></div>
<a href="#sulje">Sulje</a>
</div>
</div>
</body>
</html>ps. vähän huonosti kommentoitu mutta kokeilemalla varmaan älyää suht nopeasti idean.
Aihe on jo aika vanha, joten et voi enää vastata siihen.