Witam,
Mam pytanie, mamy sobie zdjęcie XXX.jpg
I ma ono miniaturke.
I mam taki problemik wredny, bardzo nie przyjemny...
Chciał bym żeby po kliknięciu na te miniaturkę, wczytałą się pełna wersja która ma 1/2 mb.
Nie chciał bym uzywać bezpośredniego odnośnika do .xxx.jpg bo przezuca człowieka ze tak powiem do pustej przegladarki i łąduje mu fote.
Wolał bym żeby zrobiło się coś takiego, że wczyta mu to w bierzącym oknie... z przyciskiem X do skasowania...
Czy jest jakaś taka darmowa możliwość ?
Flash / JS cokolwiek.
Wystarczy że podacie nazwę po angielsku bo nie moge dojść do storny www opisującej problem.
Pełna wersja: Maksymalizacja zdjęcia...
sadze, że JS
po kliknięciu na przycisk, skrypt JS parametrem innerHTML dodaje np. <img src="pelny_obrazek.... >
a drugi przycisk z JS robi innerHTML = '';
edit: (nie wiem czy tak to dokładnie ma wyglądac)
Pozdrawiam!
po kliknięciu na przycisk, skrypt JS parametrem innerHTML dodaje np. <img src="pelny_obrazek.... >
a drugi przycisk z JS robi innerHTML = '';
edit: (nie wiem czy tak to dokładnie ma wyglądac)
Kod
<html>
<head>
<script type="text/javascript">
<!--
function PokazIMG()
{
document.getElementById("id_div_gdzie_ma_byc_img").innerHTML = 'TUTAJ_KOD_OBRAZKA<img src="...adres..." alt=""/> <br/><a href="javascript:ZamknijIMG();">[x] Close</a>';
}
function ZamknijIMG()
{
document.getElementById("id_div_gdzie_ma_byc_img").innerHTML = '<a href="javascript:PokazIMG();">Pokaż Zdęcie</a>';
}
-->
</script>
</head>
<body
<div id="id_div_gdzie_ma_byc_img"><a href="javascript:PokazIMG();">Pokaż Zdęcie</a></div>
</body>
</html>
<head>
<script type="text/javascript">
<!--
function PokazIMG()
{
document.getElementById("id_div_gdzie_ma_byc_img").innerHTML = 'TUTAJ_KOD_OBRAZKA<img src="...adres..." alt=""/> <br/><a href="javascript:ZamknijIMG();">[x] Close</a>';
}
function ZamknijIMG()
{
document.getElementById("id_div_gdzie_ma_byc_img").innerHTML = '<a href="javascript:PokazIMG();">Pokaż Zdęcie</a>';
}
-->
</script>
</head>
<body
<div id="id_div_gdzie_ma_byc_img"><a href="javascript:PokazIMG();">Pokaż Zdęcie</a></div>
</body>
</html>
Pozdrawiam!
IMHO lightbox jest tym czego szukasz.
Edit:
Dodam, że niekoniecznie musi być oparty na jquery. Na pewno są implementacje w mootools, prototype...
Edit:
Dodam, że niekoniecznie musi być oparty na jquery. Na pewno są implementacje w mootools, prototype...
Jednak chyba zostawię jak jest.
Po chwili namysłu doszedłem:
Obrazek mający 2 MB ma około 2xxx pikseli.
Trzeba by albo ze skalować... albo napisać we flashu, z możliwością przesuwania / zoomowania.
ziqzaq
To jest dokładnie czego szukam.
A wiesz jak się krypt zachowa przy zdjeciu 2xxx pix ?
Po chwili namysłu doszedłem:
Obrazek mający 2 MB ma około 2xxx pikseli.
Trzeba by albo ze skalować... albo napisać we flashu, z możliwością przesuwania / zoomowania.
ziqzaq
To jest dokładnie czego szukam.
A wiesz jak się krypt zachowa przy zdjeciu 2xxx pix ?
Nie spotkałem się z problemami przy większych zdjęciach - pamiętam że niektóre zdjęcia u mnie miały po ~1,5mb.
Powinno chodzić bez problemu, ale głowy nie dam
Edit:
Ale fakt faktem, dobrze by było zeskalować te zjęcia ze względu na przejrzystość strony. Dobrze żeby zdjęcie nie wychodziło poza ekran.
Powinno chodzić bez problemu, ale głowy nie dam
Edit:
Ale fakt faktem, dobrze by było zeskalować te zjęcia ze względu na przejrzystość strony. Dobrze żeby zdjęcie nie wychodziło poza ekran.
Po długiej walce, wrzuciłem na serwer ten skrypt, i postanowiłem wypróbować.
No, i problem... jeżeli znajduje się we wnętrzu DIV-a generowanego przez curvycorners skrypt po prostu nie działa... wykłada się... :/
Przed curvycorners ( w divie bez rogów... działą ) za divem... nie :/
Klikając po prostu otwiera mi zdjęcie..
Nie mogę sobie pozwolić na kasacje curvycorners... bo używam ich do renderowania zaokrąglanych rogów.. :/
Czy jest jakiś pomysł, jakaś myśl technologiczna ?
No, i problem... jeżeli znajduje się we wnętrzu DIV-a generowanego przez curvycorners skrypt po prostu nie działa... wykłada się... :/
Przed curvycorners ( w divie bez rogów... działą ) za divem... nie :/
Klikając po prostu otwiera mi zdjęcie..
Nie mogę sobie pozwolić na kasacje curvycorners... bo używam ich do renderowania zaokrąglanych rogów.. :/
Czy jest jakiś pomysł, jakaś myśl technologiczna ?
Skąd bierzesz curvycorners (jakiś framework czy cuś)?
Ja testowałem na tym z http://www.curvycorners.net/ i działa bezproblemowo.
Dam na wszelki wypadek kod:
PS Sprawdź w Operze lub FF jakie błędy dostajesz.
Edit: Kod sprawdzany na O i FF.
Ja testowałem na tym z http://www.curvycorners.net/ i działa bezproblemowo.
Dam na wszelki wypadek kod:
Kod
<html>
<head>
<title>Tit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="./curvycorners.js"></script>
<script type="text/javascript">
$(document).ready(function(){
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
var myBoxObject = new curvyCorners(settings, "myBox");
myBoxObject.applyCornersToAll();
$('.myBox a').lightBox({fixedNavigation:true});
});
</script>
<link rel="stylesheet" type="text/css" href="./jquery.lightbox-0.5.css" />
<style type="text/css">
body { background: #aaa; }
.myBox {
margin: 50px;
padding: 20px;
background: #fff;
}
</style>
</head>
<body>
<div class="myBox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
<a href="sciezka/image1.jpg"><img src="sciezka/thumb_image1.jpg" alt="img" /></a>
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
</div>
</body>
</html>
<head>
<title>Tit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="./curvycorners.js"></script>
<script type="text/javascript">
$(document).ready(function(){
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
var myBoxObject = new curvyCorners(settings, "myBox");
myBoxObject.applyCornersToAll();
$('.myBox a').lightBox({fixedNavigation:true});
});
</script>
<link rel="stylesheet" type="text/css" href="./jquery.lightbox-0.5.css" />
<style type="text/css">
body { background: #aaa; }
.myBox {
margin: 50px;
padding: 20px;
background: #fff;
}
</style>
</head>
<body>
<div class="myBox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
<a href="sciezka/image1.jpg"><img src="sciezka/thumb_image1.jpg" alt="img" /></a>
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.
</div>
</body>
</html>
PS Sprawdź w Operze lub FF jakie błędy dostajesz.
Edit: Kod sprawdzany na O i FF.
Właśnie z tego adresu co podałeś.
Mam prośbę.
A spróbuj zainicjować najpierw curvycorners a dopiero potem bibliotekę odpowiadającą za obrazki ?
Mógł byś takie coś spróbować ?
Pozdrawiam
Mam prośbę.
A spróbuj zainicjować najpierw curvycorners a dopiero potem bibliotekę odpowiadającą za obrazki ?
Mógł byś takie coś spróbować ?
Pozdrawiam
No i wszystko jasne.
Curvycorners muszą iść na pierwszy ogień, później dopiero lightbox, w przeciwnym wypadku wywala lightboxa
Edit: Czyli kod dokładnie taki jak mam w poprzednim poście.
Curvycorners muszą iść na pierwszy ogień, później dopiero lightbox, w przeciwnym wypadku wywala lightboxa
Edit: Czyli kod dokładnie taki jak mam w poprzednim poście.
Nie działa.
Wyciągam z DIV-a generowanego przez CurvyCorners - działa.
Wkładam do DIV-a, przestaje działać.
No i nie wiem co robić, ręce opadają...
Wyciągam z DIV-a generowanego przez CurvyCorners - działa.
Wkładam do DIV-a, przestaje działać.
No i nie wiem co robić, ręce opadają...
Daj trochę kodu, trochę html + js.
Edit:
Daj znać czy próbowałeś tego mojego przykładu - jestem ciekaw czy to tylko u mnie działa.
Napisz jakich wersji tych skryptów (jquery, curvycorners) używasz.
Edit:
Daj znać czy próbowałeś tego mojego przykładu - jestem ciekaw czy to tylko u mnie działa.
Napisz jakich wersji tych skryptów (jquery, curvycorners) używasz.
Dzięki pomocy kolegi ziqzaq via PW doszliśmy do uruchomienia obydwu "frameworków" obok siebie.
Problemem okazała się kolejność, jak i sposób wczytywania.
Gdyby ktoś potrzebował pomocy, to w razie czego służę konfiguracją która u mnie działa, jak najbardziej poprawnie.
Dziękuję jeszcze raz i pozdrawiam
Problemem okazała się kolejność, jak i sposób wczytywania.
Gdyby ktoś potrzebował pomocy, to w razie czego służę konfiguracją która u mnie działa, jak najbardziej poprawnie.
Dziękuję jeszcze raz i pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.