afbeelding menu systeem

Status
Niet open voor verdere reacties.
G

Gust1977

Gebruiker
Lid geworden
8 nov 2007
Berichten
70
Hallo!

Ik was op zoek naar een verticaal afbeelding menu systeem. Op http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu heb ik deze dan ook gevonden. Zie example 3

Hetgeen wat je normaal zou moeten doen
- download de .js file
- verander deze .js file, zoals uitgelegd in example 3
- plaats het stukje html-code, zoals uitgelegd in example 3

Maar er is een probleem:
Hoe moet ik dat stukje .js in de grote .js-file plaatsen? Hierdoor werkt het menu niet bij mij. Is er iemand die mij hiermee kan helpen?

De html:
HTML: 
<ul id="verticalmenu">    
<li><img src="creditcardsV.jpg" /></li>    
<li><img src="gamesV.jpg" /></li>    
<li><img src="computerV.jpg" /></li>    
<li><img src="eiffeltowerV.jpg" /></li>    
<li><img src="electronicV.jpg" /></li> 
</ul>

Een klein stukje javascript code:
[JS]var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});[/JS]

Deze moet verwerkt worden in onderstaande javascript code:
[JS]var BySlideMenu = new Class({
Implements: Options,

options: {
defaultIndex: false,
expandMode: 'mouseover',
pinMode: false,
vertical: false,
compressSize: 40,
elementWidth: 320,
elementHeight: 240,
autoSize: true,
duration: 500,
transition: 'linear',
containerWidth: null,
containerHeight: null,
useOverflow: false
},

initialize: function(containerId, options){
this.setOptions(options);
this.elementsId = [];
this.containerId = $pick(containerId, 'byslidemenu');

var container = $(this.containerId);

container.addEvent('mouseleave', function(){
this.resetAll();
}.bind(this));

var elements = container.getChildren();
var num = elements.length;

var imgHeight = null, imgWidth = null;
if(this.options.autoSize)
{
var firstImg = elements[0].getElement('img');

if(firstImg)
{
imgHeight = firstImg.getHeight();
imgWidth = firstImg.getWidth();
}
}

var offsetWidth =
elements[0].getStyle('padding-left').toInt()
+ elements[0].getStyle('padding-right').toInt()
+ elements[0].getStyle('border-left-width').toInt()
+ elements[0].getStyle('border-right-width').toInt();
var offsetHeight =
elements[0].getStyle('padding-top').toInt()
+ elements[0].getStyle('padding-bottom').toInt()
+ elements[0].getStyle('border-top-width').toInt()
+ elements[0].getStyle('border-bottom-width').toInt();

if(this.options.vertical)
{
this.posAttr = 'top';
var containerWidth = $pick(imgWidth, this.options.containerWidth, this.options.elementWidth);
if(containerWidth == "full")
containerWidth = container.getParent().getStyle('width').toInt();
if(this.options.containerHeight)
{
if(this.options.containerWidth == 'full')
var containerHeight = container.getParent().getStyle('height').toInt();
else
var containerHeight = this.options.containerHeight;

this.openSize = containerHeight - ((num - 1) * this.options.compressSize);
}
else
{
this.openSize = $pick(imgHeight, this.options.elementHeight);
var containerHeight = this.openSize + ((num - 1) * this.options.compressSize);
}

this.closeSize = containerHeight / num;

var elementHeight = this.openSize;
var elementWidth = containerWidth;
}
else
{
this.posAttr = 'left';
var containerHeight = $pick(imgHeight, this.options.containerHeight, this.options.elementHeight);
if(containerHeight == "full")
containerHeight = container.getParent().getStyle('height').toInt();
if(this.options.containerWidth)
{
if(this.options.containerWidth == 'full')
var containerWidth = container.getParent().getStyle('width').toInt();
else
var containerWidth = this.options.containerWidth;

this.openSize = containerWidth - ((num - 1) * this.options.compressSize);
}
else
{
this.openSize = $pick(imgWidth, this.options.elementWidth);
var containerWidth = this.openSize + ((num - 1) * this.options.compressSize);
}
this.closeSize = containerWidth / num;

var elementHeight = containerHeight;
var elementWidth = this.openSize;
}

container.setStyles({
padding: 0,
position: 'relative',
overflow: 'hidden',
width: containerWidth,
height: containerHeight
});

var id = 0;

elements.each(function(element){
var beforePos = id * this.options.compressSize;
var afterPos = this.openSize + ((id - 1) * this.options.compressSize);
var closePos = id * this.closeSize;
element.setStyles({
position: 'absolute',
height: elementHeight - offsetHeight,
width: elementWidth - offsetWidth
});
element.setStyle(this.posAttr, closePos);
element.set('tween', {
duration: this.options.duration,
transition: this.options.transition
});

id++;

element.set('id', this.containerId + '_Elm' + id);
element.store('id', id);

element.store('beforePos', beforePos);
element.store('afterPos', afterPos);
element.store('closePos', closePos);

this.elementsId.include(id);

if([this.options.pinMode, this.options.expandMode].contains('mouseover'))
{
element.addEvent('mouseenter', function(element){
if(this.options.expandMode == 'mouseover')
this.expand(element, this.options.pinMode == 'mouseover');
}.bind(this, element));
}

if(this.options.pinMode || this.options.expandMode == 'click')
{
element.addEvent('click', function(element){
if(this.options.defaultIndex == element.retrieve('id'))
{
this.options.defaultIndex = 0;
this.resetAll();
}
else if(this.options.expandMode == 'click')
this.expand(element, this.options.pinMode == 'click');
else
this.options.defaultIndex = element.retrieve('id');
}.bind(this, element));
}

}, this);

if(this.options.defaultIndex)
this.expand(this.options.defaultIndex, false, true);
},

expand: function(element, setDefault, noAnim){
if($type(element) == 'number')
element = $(this.containerId + '_Elm' + element);

if(this.options.useOverflow)
this.clearOverflow();

var currentId = element.retrieve('id');

if(this.options.useOverflow)
this.switchOverflowTimer = this.switchOverflow.delay(this.options.duration, this, element);

if(setDefault)
this.options.defaultIndex = currentId;

this.elementsId.each(function(elementId){
var elm = $(this.containerId + '_Elm' + elementId);
if(elementId > currentId)
this.compressAfter(elm, noAnim);
else
this.compressBefore(elm, noAnim);
}, this);
},

switchOverflow: function(element){
element.setStyle('overflow', 'auto');
},

clearOverflow: function(){
$clear(this.switchOverflowTimer);
$(this.containerId).getChildren().setStyle('overflow', '');
},

compressBefore: function(element, noAnim){
var pos = element.retrieve('beforePos');
var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition});

if(noAnim)
tween.set(pos);
else
tween.start(pos);
},

compressAfter: function(element, noAnim){
var pos = element.retrieve('afterPos');
var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition});
if(noAnim)
tween.set(pos);
else
tween.start(pos);
},

reset: function(element){
var pos = element.retrieve('closePos');
element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition}).start(pos);
},

resetAll: function(){
if(this.options.useOverflow)
this.clearOverflow();

if(this.options.defaultIndex)
this.expand(this.options.defaultIndex);
else
{
this.elementsId.each(function(elementId){
this.reset($(this.containerId + '_Elm' + elementId));
}, this);
}
}
});[/JS]

Wie wilt er mij helpen aub? :confused:
 
BySlideMenu is written for Mootools v1.2

It requires these modules (and their dependencies):

* Element.Dimensions
* Element.Event
* Fx.Tween
* Fx.Transitions
Klik om te vergroten...

Dat stukje heb je gelezen? :)
 
Ik weet niet of dat nodig is hoor. Want ik heb eens de hele broncode van die pagina gebruikt en op mijn server geplaatst (inclusief css, javascript en images). Maar van het moment ik een voorbeeld verwijderde werkte er niets meer.
 
Laatst bewerkt:
Er is ook nog een alternatief: http://www.scriptocean.com/accordion.html

Dit is hetzelfde, alleen is het software die je moet installeren. Heb dit al gedaan. Maar het nadeel is dat de hoogte en breedte dmv pixels werkt, en niet met %

een stukje javascript:

ac1folderset=fstr;
var tmpleftpad=0;
var tmptoppad=0;
ac1hpiece=ac1hpiece+'<div style="position:relative;
width:'+320+'px;
height:'+280+'px;
border-style:solid;
border-width:'+0+'px;
border-color:#'+'666666'+';
">';
ac1hpiece=ac1hpiece+'<div style="position:relative;
width:'+320+'px;
height:'+280+'px;
overflow:hidden;
border-style:solid;
border-width:0px;
border-color:#FFFFFF;
cursor:default;
" onMouseOver="ac1outall()" onMouseOut="ac1mouse_divout()">';
if(0==1)
{
 
Laatst bewerkt:
Voor zover ik het bekeken heb, en dat was ff snel, dan is het iets heel anders.

Joomla is om makkelijk een siteje in elkaar te douwen.

Mootools is een javascript framework. Oftuwel veel voorgedefinieerde JavaScript functies. (Ik geloof trouwens wel dat Mootools redelijk makkelijk te integreren is in Joomla. Ben er in ieder geval wel wat dingen over tegen gekomen toen ik ExtJS (Extended Javascript) in Joomla ging integreren.)
 
Gust1977 zei:
Volgens http://mootools.net/download moet je een javascript bij je pagina zetten. Op de originele pagina http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu zie je trouwens in de bron eveneens een link naar datzelfde javascript.

Dus heb dat gedaan. En toch werkt het nog niet. :shocked:
Klik om te vergroten...

En eveneens staat op die zelfde pagina :

Requirements

BySlideMenu is written for Mootools v1.2

It requires these modules (and their dependencies):

* Element.Dimensions
* Element.Event
* Fx.Tween
* Fx.Transitions
 
Ja, en dat snap ik dan niet wat ze daarmee bedoelen, daar staat niet eens een link bij
 
Ok, ik weet al iets meer: je moet naar http://www.mootools.net/core gaan en daar aanduiden wat je nodig hebt. Dan klik je op download, en dan gaat er een javascript open die je moet installeren.

voorlopig nog zonder resultaat
 
HTML: 
    <td height="95%" valign="top">
    <ul height="95%" class="bsm vertical" id="verticalmenu">   

<li><img src="img/creditcardsV.jpg" width="300" height="225"/></li>    
<li><img src="img/gamesV.jpg" width="300" height="225"/></li>    
<li><img src="img/computerV.jpg" width="300" height="225" /></li>    
<li><img src="img/eiffeltowerV.jpg" width="300" height="225"/></li>    
<li><img src="img/electronicV.jpg" width="300" height="225"/></li>
<li><img src="img/computerV.jpg" width="300" height="225"/></li>    
<li><img src="img/eiffeltowerV.jpg" width="300" height="225"/></li>    
<li><img src="img/electronicV.jpg" width="300" height="225"/></li>

</ul>
Klik om te vergroten...
dat is 2x 95%, en voor de rest images van 225px hoog... verander die dus maar eens even ;)
 
Ik wil je niet bekritiseren maar dat heeft er echt niets mee te maken. Het zit m ergens in de javascript.

Ik dacht hier ergens, heb er al mee zitten spelen, maar niets helpt:
[JS] options: {
defaultIndex: false,
expandMode: 'mouseover',
pinMode: false,
vertical: true,
compressSize: 40,
elementWidth: 320,
elementHeight: 240,
autoSize: true,
duration: 500,
transition: Fx.Transitions.Bounce.easeOut,
containerWidth: null,
containerHeight: null,
useOverflow: false[/JS]
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan