diverse "Cycler" aus Member modul

[gottfried]

Hallo ! 

Es geht um

http://www.channel-1.de/tests/wb/pages/cycler.php (Provisorium)

Ich hab ein winziges Problem.   

Ich habe einen Preset zum Member Modul gebastelt. 

http://www.websitebakers.com/pages/modules/listings/various/members.php

Jede Gruppe des Membermoduls erzeugt quasi einen anderen Bildwechsel aus seinen Members.
Hier jeweils 2 Members pro 4 Gruppen. Bißchen unruhig das ganze, aber  jeweils zwei nebeneinander kämen doch ganz gut.

http://malsup.com/jquery/cycle/


Die Gruppennamen werden jeweils zu IDs der Container, die die Subcontainer beinhalten, die dann "cyceln"

Die Änderungen zum "picture-menue" Preset sind nicht besonders groß, das frontend.js ist erweitertes accordion (damit accordion auch noch geht)

Mein Problem ist, daß ich die nicht horizontal nebeneinander bekomme, was doch schön wär.
Und ich find keinen Grund.
Außer den durch JS  wechselnden Styles, die z.B Firebug an den divs herzeigt.
Aber da seh ich den Grund auch nicht (overflow: hidden, etwa?)

Die einfachen CSS sind im Quelltext ersichtlich.  s1 - s sind die Container, .pemenu ist die Klasse der Subcontainer.

Code:

<style type="text/css">
#s1 {width: 160px;height:210px; border: 1px solid #000}
#s2 {width: 160px; height:210px; border: 1px solid #000}
#s3 {width: 160px; height:210px; border: 1px solid #000}
#s4 {width: 160px; height:210px; border: 1px solid #000}

.pmenu {width:150px;}
.pmenu a {display:block; float:left; width:150px; height:150px; text-decoration:none ! important; border:3px solid #dddddd; margin:2px;}
.pmenu a:hover {background-color:#dddddd; border-color:#cc0000}

.pmenu img {width:140px; height:90px;}
.pmenu .name {display:block; margin:2px; padding:0;font-size:12px;font-style:bold;}
.pmenu .short {margin:2px; padding:0;font-size:10px;}
</style>

CSS Gehört vielleicht nicht hierher, aber es könnt ja sein, daß einer hier besser CSS kann, als ich.
Es geht nebenbei auch nicht anders mit anderen Templates.


http://www.channel-1/tests/wb/malsup.zip ist die Cycler Erweiterung Vers. 0.0.7

liebe Grüße ! 

[BerndJM]

Hi,

jeweils 2 nebeneinander

ohne jetzt groß nachzudenken:
hast du's schon mal mit float: left;
für #s1 und #s3 probiert?

Grüßle Bernd

[gottfried]

Hallo Bernd.

Tja. geht gut mit float: left für die Ungeraden.

1000 Dank !

[crnogorac081]

Hi,

How did you integrate this script into WB ??

BTW, the file below is not working..

http://www.channel-1/tests/wb/malsup.zip ist die Cycler Erweiterung Vers. 0.0.7

[Hans>NULL]

http://www.channel-1.de/tests/wb/malsup.zip

[crnogorac081]

Can someone please explain into english how to install this, as it can not be istaled as modul..

cheers

[chio]

Erstaunlich, was man mit "members" alles machen kann

Das sieht wirklich gut aus. Welche Komponenten sind dafür nötig?

[mr-fan]

malsup.js muß in presets-en des membermodules.

frontend.js muß in das root des member moduls. hat 4 (#s1 #s2 #s3 #s4) verschiedene cycler Routinen zusätzlich zum accordeon.
Das von Luisehahne.

jquery.cycle.all.js muß halt irgendwohin, wos am besten passt.

Die Gruppen müssen dann s1 oder s2 oder s3 oder s4 heißen (erweiterbar)

this is the readme file of the pack!

i try it to translate:

this is a "preset" to the modul members - this must be installed

1. malsub.js  you must put in the "presets-en" of the members-mod

2. frontend.js in the root of the members-mod (included different cycler-effects additional to the accordeon-effect #s1 #s2 #s3 #s4)

3. jquery.cycle.all.js is not real explained - i think this must load in the template it make sense if you make in the root of WB a new folder like "Jquery" where you can put all plugins or the basic framework!

i think it required installed/loaded Jquery, too

you can look at the RC1 of 2.8 how it is implemented in the system 2.8 will full suport Jquery framework!

regards martin

[crnogorac081]

Thanks Martin. I tried to install it as modul but id didnt work )

I just added

Code:

<script language="JavaScript" type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/jquery.cycle.all.js"></script> 
<script language="JavaScript" type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/malsup.js"></script>

into template page, and frontend.js into module folder.

Can you please a little more specific and give some example how we add group and members, and where to put malsup.js file ?

cheers

[crnogorac081]

did anyone tested this module yet ?

[mr-fan]

sorry crnogorac081, lol what mean this nic? 

i forget to tell you that Jquery must be installed and called in the template!

you can use the newest trunk from 2.8 WB to test it out there is Jquery installed!

or try out to implement Jquery in WB 2.7

a short doc for this is there: (don't know if its complete but a starting point)

http://www.wdsnet.de/wb/pages/hilfehelp/overview/general.php
(the coder who work on the Jquery Project of WebsiteBaker - his private sites)

http://www.websitebakers.com/pages/upcoming-items/test-phase/jquery.php
(AMASP Jquery site)

regards martin


http://www.websitebakers.com/pages/upcoming-items/test-phase/jquery.php

[crnogorac081]

thanks martin

[crnogorac081]

Hi all, I m testing 2.8 RC1 and thi module, and I put:

Code:

1. malsub.js  you must put in the "presets-en" of the members-mod

2. frontend.js in the root of the members-mod

and also:

Code:

<style type="text/css">
#s1 {width: 160px;height:210px; border: 1px solid #000}
#s2 {width: 160px; height:210px; border: 1px solid #000}
#s3 {width: 160px; height:210px; border: 1px solid #000}
#s4 {width: 160px; height:210px; border: 1px solid #000}

.pmenu {width:150px;}
.pmenu a {display:block; float:left; width:150px; height:150px; text-decoration:none ! important; border:3px solid #dddddd; margin:2px;}
.pmenu a:hover {background-color:#dddddd; border-color:#cc0000}

.pmenu img {width:140px; height:90px;}
.pmenu .name {display:block; margin:2px; padding:0;font-size:12px;font-style:bold;}
.pmenu .short {margin:2px; padding:0;font-size:10px;}
</style>

in frontend css file of the module...

Then I created a group S1 and put 2 members in it, but still I have regular view like the old members module and not the cycler efect.....can someoe pls try to figure out how this works...

cheers

[gottfried]

Hi !
I made a new, improved release of my picture&text cycler preset for the member module.

it looks like http://www.channel-1.de/tests/wb/pages/cycler.php
which is only a test - some dimensions do not fit - learn from it ! you can change a lot.

All you need is attached. The preset has a new name now - cycle-members.js instead of malsup.js

It is easy to copy all to the wbroot, containing all 2 neccesary jquery libraries, some example pictures and the preset.
(also jquery-min.js !!!!! if you use wb2.8 think about it)
No modifications of frontend.js are neccesary, please use the original of members.
Userspecific js scripts are packed to the preset now.
There is a readme packed with it and some pictures for testing (beg your pardon for squeezing them)
I tested it on a freshly installed WB portable, at last.

 

[crnogorac081]

ehhheeee, just to mention that you have to SELECT the cycle-members from the COMBO BOX at the module setting..

Nobody mentioned this )) and I almost give up from this module ))))

by the way, can you guide me how to import all effects from

Code:

http://malsup.com/jquery/cycle/int.html

I tried to add another effect:

Code:

$(\"#s5\").cycle({ fx:    \"scrollDown\", easing:    \"bounceout\",  delay: -2000 });   

from the cycle site and renamed group into s5 but no luck (

And downloaded jQuery Cycle Plugin with all transitions - uncompressed (44 KB) frpm

Code:

http://malsup.com/jquery/cycle/download.html

instead jquery.cycle.all.mi n.js

Also, is there  a way to have for example 5 of this cyclers in a row with a little distance between them.. ?? I tried to change the code but then everything screws up

cheers

[gottfried]

Hi Crogorac081

I think you use my last preset from above ?!

Yes, I remember i hat the same problems with the combo box in the beginning.  

I cannot tell you how to import all effects. I marked the codes one for another and pasted them.  

To add an additional effect you have to edit cycle-members.js, the document.edit.heade r.value section.
you need a #sn in the css part and a  $(\"#sn\").cycle..... in the scriptpart of this string.
You could also change little parts oft the existing.

It is a little difficult to edit this long string correctly. But I did it. I think you can do it also.
\n is a linefeed and \" has to be used instead of ' . Everything is in one long string.

It is easy to copy new presets into the header-area of the preset, but it is not written to the javascript.
so you can try  out, first.

jquery.cycle.all uncompressed is the same.  It is a little larger and loads a little slowlyer, but it is ok.

The CSS of the cyclers  and the container of the cycler (.pmenu) are in the preset.
The easiest way for me was to edit the headline in the preset in the backend.
when everything was right I edited the javascript.

you can change most with css. In the example where two in a row, because #s1 and #s3 are float: left;
if you make them all float: left; they are in a row (the example is so now  )
you can do a lot with padding (like #s1 ...) padding: 20px 20px 20px 30px} (is in the example now  )

with example i mean http://www.channel-1.de/tests/wb/pages/cycler.php  

 

It could be more flexible for you to copy and paste the CSS and Javascript from the headersection of the preset to extra files you include in the head of your template. So the CSS and JS was more transparent if you intend excessive use of this module. You could change everything more easyly. Do not forget to delete the headersection then.

[crnogorac081]

Yea, and I not the coder, so its a little harder for me to figure out the syntax for php, java.. etc.. 

cheers

[gottfried]

Hi

you won't believe me, but my knowledge of PHP and JAVASCRIPT is very poor.
But I am good in cut and paste  

I did not test  the attached files !!!

You can use cycle-members-x.js as alternative preset and include cycle-members-i.css and cycle-members-i.js in
the header of your template.

That can make it easyer for you to include more different kinds of cyclers from malsup and achieve
different orders - is in conflict with the cycle-members above !

Please tell me, if you like this better !  

[crnogorac081]

I think the first way was better. instead writteing $(\"#s4\").cycle({ fx:    \"shuffle\", delay: -4000 }); into header,  I put cycle styles in frontend.js

Code:

$(function() {
$('#s1').cycle({
    fx:     'scrollUp',
    timeout: 6000,
    delay:  -2000
});

$('#s2').cycle({
    fx:    'scrollRight',
    delay: -1000
});

$('#s3').cycle({
    fx:    'zoom',
    pause:  1
});
$('#s4').cycle({
    fx:    'shuffle',
    delay: -4000
});
$('#s6').cycle({
    fx:      'custom',
    cssBefore: { 
        left: 115, 
        top:  115, 
        width: 0, 
        height: 0, 
        opacity: 1,
        zIndex: 1
    },
    animOut: { 
        opacity: 0 
    },
    animIn: { 
        left: 0, 
        top: 0, 
        width: 200, 
        height: 200 
    },
    cssAfter: { 
        zIndex: 0
    },
    delay: -3000
});
});

and #s6 was copy-paste from the the site... And in header I left only css styles..


 It is just required to use jQuery Cycle Plugin with all transitions (jquery.cycle.all.js) - uncompressed instead minimised verson (jquery.cycle.all.mi n.js) in ROOT/include/jquery/plugins

cheers

[BerndJM]

Gottfried !!!

Code:

you won't believe me, but my knowledge of PHP and JAVA is very poor.

JavaScript
Himmelherrgottssakr amentnocheins
Wann wollt ihr das endlich lernen, daß Java und JavaScript ausser den  4 Buchstaben am Anfang nix miteinander zu tun hat

Grüßle Bernd

[gottfried]

Hi Cronogorac !  

I think the first way was better. instead writteing $(\"#s4\").cycle({ fx:    \"shuffle\", delay: -4000 }); into header,  I put cycle styles in frontend.js

That was my very first attempt, you know - it is ok.  
The coder of the membermodule thinks it was better to put all into the preset because of possible changes in the future, the core files should not be changed.  Wooow - it really worked.  
That is easier for distribution but a little hard to change.  

(next i try to put include statements of .js and .css in the headersection of the preset.)

It is just required to use jQuery Cycle Plugin with all transitions (jquery.cycle.all.js) - uncompressed instead minimised verson (jquery.cycle.all.mi n.js) in ROOT/include/jquery/plugins

I do not think you need to use the uncompressed version. I used it experimental and substituted it by the compressed version when everything worked fine. It made no difference. You can study the uncompressed version better but it loads slowlyer. I think there is no other code in the compressed version - I hope - for security reasons. Only a lot of formatting is removed in it.

I see you can work with the preset.  

[gottfried]

Hallo Bernd ! Ja - stimmt. War zu faul das auszuschreiben.

[crnogorac081]

i just wasn't sure if minified version supports all effects anyway , the difference is just in 20kb 

[gottfried]

Code:

i just wasn't sure if minified version supports all effects anyway , the difference is just in 20kb

That's right.  But you also include the jquery core js and the more javascriptlibraries you include the bigger ist the difference between minified versions and beautified versions. 

[crnogorac081]

also here is another solution how to integrate some file, in my case java script in the frontend:

<?php if(PAGE_ID == 6) { print ('<script language="JavaScript" type="text/javascript" src="'.WB_URL.'/modules/members/cycle_styles.js"></script>'  ); } ?>

Put this into header, and change the Page Id of the page where the Cycler is (in my case, Page_Id is 6 ). I put the styles (#1 ,#2,...) in the cycle_styles.js file.

cheers