ugrás a tartalomhoz

képnézegető-multibox alkalmazása

tashubanya · 2009. Okt. 22. (Cs), 23.03
Sziasztok!

Teljesen autodidakta vagyok, felhasználói szintű számítógépes ismeretekkel :)
Csináltam egy oldalt magamnak, és megtaláltam ezt a képnézegető programot: http://www.phatfusion.net/multibox/
Nagyon tetszik, de fogalmam sincs, hogyan kell használni a gyakorlatban.
A leírás alapján megcsináltam a megfelelő mappákat, mindenkit a helyére másoltam, de a html-be való beírásnál valószínűleg valami(ke)t kihagyok, ugyanis, nem működik...
Aki már csinált ilyet, legyen kedves elmagyarázni nekem, mint egy 4-5 évesnek, hogy hogyan is kell ezt jól megcsinálni.
Előre is köszönöm a segítséget!

THanya
 
1

Leírás

Poetro · 2009. Okt. 23. (P), 00.02
Nem tudom mit értettél leírás, meg könyvtárak alatt, de ez egy Lightbox szerű cucc, amihez a HTMLben szerepelnie kell a MooTools JavaScriptjének, és a multibox JavaScriptjének, és CSS-einek, valamint az inicializáló résznek. Ez azon az oldalon:

var box = {};
window.addEvent('domready', function(){
  box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
A minimális HTML valahogy így nézne ki:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="multibox.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="all" /><![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="overlay.js"></script>
<script type="text/javascript" src="multibox.js"></script>
<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
  box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>
</head>
<body>
</body>
</html>
És ekkor a body részben olyan linkeket kell megadni, aminek a class-a mb.
2

Tehát, ha az általad leírt

tashubanya · 2009. Okt. 23. (P), 16.48
Tehát, ha az általad leírt minimális html-be beírt "script-es" részt beírom az én html-embe és utána az minta oldal alapján belinkelem a képeket, akkor működik?
Így legyen, előre is köszönöm, ha megcsináltam jelentkezek remélhetőleg eredménnyel.
3

JS / CSS

Poetro · 2009. Okt. 23. (P), 17.14
Persze a kódban szereplő CSS és JS fájloknak elérhetőnek kell lennie, és ott, ahol a HTML van.
4

html rendben, css és js

tashubanya · 2009. Okt. 24. (Szo), 13.38
html rendben, css és js fájlok a helyükön.
most, ha megnyitom a html-t és a kis képre kattintok, akkor egy új ablakban nyílik meg a kép effektek nélkül. felmásoltam a multibox mappában lévő képeket a tárhelyre, de mit kell még onnan és hova felmásolni?
mondtam, hogy amatőr vagyok....
köszönöm előre is!
5

miért nem?

tashubanya · 2009. Okt. 24. (Szo), 21.57
mindenki a helyén. a példa oldal alapján létrehoztam a tárhelyen a mappákat, képeket, mégsem klappol valami.
esetleg hiányozhat még valami a html-ből??
íme a kreálmányom:

<link rel="stylesheet" type="text/css" media="screen" href="style/layout.css" />
<link href="multibox.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="all" /><![endif]-->

<script type="text/javascript" src="utils/overlay.js"></script>
<script type="text/javascript" src="_common/js/mootools.js"></script>
<script type="text/javascript" src="multibox.js"></script>

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>

</head>
<body>
.
.
.
<div id="content">
<div align="center">
<div class="multiBoxDesc mb1"></div>
<a href="images/xxx/yyy/001_8104.jpg" id="mb2" class="mb" title="blablabla"><img src="images/xxx/y'y'y'/001_8104.jpg" width="35" height="23" /></a>
<div class="multiBoxDesc mb1">This is my descrition text 1. It can support html.</div>
.
.
.
</div>
.
.
.
</body>
</html>
6

működik

tashubanya · 2009. Okt. 24. (Szo), 22.48
Köszönöm szépen az eddigieket, korrigáltam az előzőt és működik, tökéletesen.
Köszönöm szépen!!!!
7

belejöttem, korrigálom

tashubanya · 2009. Dec. 2. (Sze), 23.12
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
ezen sort korrigálni kellett, ugyanis a mootools v1.11 már nem lenni, és az aktuális (apróbetűs részben volt csak ugye benne) így érhető el, ennek hiányában a java kissé összegabalyodik és duplán nyitja a képnézegető ablakát:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.1.2/mootools-yui-compressed.js"></script>