Coda-Slider RT basierend auf jQuery

[habi]

Hallo zusammen

Bin grad an unserer Firmensite am rumbasteln und habe dabei mal ein Codaslider RT zusammengestiefelt.
Download-Link: http://www.pixelfieber.ch/codaslider.zip
Beispiel: http://www.pixelfieber.ch/index.php?privatkunden
(Diese Site ist aber nur ein dummy zum Pröbeln. Weiss nicht, wie lange die so online ist)

Das entsprechende Replacement Tag lautet: {CODASLIDER:artid1,artid2,artid3,...}

Ist vielleicht nicht bis ins Letzte ausgereift, aber als Basis sollte es genügen.
Dimension und Farben des Sliders werden im CSS definiert.

Die js Dateien werden im RT selber eingebunden. Hat den Vorteil, dass Sie nur dort eingebunden werden, wo man sie braucht und den Nachteil, dass nur 1 Slider pro Seite verwendet werden kann. Die jQuery Lib selber wird bei mir im Template der Seite integriert Das wäre also noch zusätzlich zu tun.

[markus s]

irgendwie läuft das aber nicht...
sollte nochmal überdacht werden...

[habi]

habs gerade testweise auf einer anderen site installiert. klappte auf anhieb.

css eingebunden?
js files am richtigen ort?
jquery lib über die seitenvorlage zusätzlich eingebunden? habe bei mir jquery-1.3.2.min.js. sollte aber auch mit einer älteren gehen
artikel-id's kommagetrennt im RT?

einzig was nicht geht ist, dass andere RT's in den eingebundenen artikeln aufgelöst werden.

[juergen]

hmmm... das Javascript versuchte bei mir einen Port 19 zu öffnen ... Ist da ein Schreibfehler ? FF hat das eben ziemlich angemeckert.

[markus s]

sag ich doch...

[jsw_nz]

Hi Habi,

Thanks for your work on this.
Downloaded your zip and was able to get it to work
Nice special effects

Of course - modification to css is essential - in my case
I created a 4 category button scheme - where each button is 'fixed' width. Here is the css modification
for anybody else - TARGET WIDTH: 710px; fixed width blocks are a wee pesky:

Code: Select all

#slider {
	width: 710px; 
	padding: 0px;
	position: relative;
	overflow-x: hidden;
	float:left;
}
.scroll {
	height: 200px;
	width: 720px;
	overflow: hidden;
	overflow-x: hidden;
	position: relative;
	clear: left;
}
ul.navigation li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 177px;
	float: left;
	border-left: 1px solid #FFF;
}
ul.navigation a {
    display: block;
	cursor: pointer;
	background-color: #69C;
	padding: 0.5em 0.75em;
	color: #FFF;
	text-decoration: none;
}
ul.navigation a:hover {
	background-color: #069;
	color: #FFF;
}
.scrollButtons {
	display:none;
}

i also added a extra div (navDivContainer) to the rt_codaslider.php
to create a solid background color to fill out the fixed width 710px;
<div class="navDivContainer"><ul class="navigation">........</ul></div>

Code: Select all

.navDivContainer{
	background-color: #69C;
	width: 715px;
	float:left;
	display:block;
}

Nice addition to WCMS!

[Oliver Georgi]

It would be better to use content part Tabs for it in combination with customized template.

[jsw_nz]

Hi Oliver

Funny you should mention this
- only because there seems to be newer way of doing this without the file dependencies
- this implementation of jQuery (Similar to jQuery UI) - seems to be promising - using tabs:

http://blog.themeforest.net/tutorials/c ... ery-tools/

demo here
http://themeforest.s3.amazonaws.com/89_ ... index.html

all a matter of time - happy about this RT atm - although not perfect

cheers from down under

[zuker]

For me this downloaded package of CODA-SLIDER RT doesn’t work
When I click on the tab I get the result “Not Found. The requested URL /tab_10 was not found on this server” .
Any idea why?

[jsw_nz]

Hi Zucker

Might be a setup issue:

The rt php file calls a wcms function:
showSelectedContent("CPA," . $row['article_id'])

So you need to create a separate article with a content-part
CPA calls the contentpart based on the article_id
example:
{CODASLIDER:219,220,221,222}

Just a guess - otherwise JQuery is not firing properly -
make sure you have the core jquery file called in your template:
<script type="text/javascript" src="template/inc_js/jquery.js"></script>
i have noticed that JQuery noConflict strategies don't work
- spent some time on this - so make sure there are
no calls to mootools on the page -

I am looking into an alternative approach that solves the noConflict issue...
cheers
-j-

[zuker]

If you use downloade codaslider.zip pack then in your template “html head:” section you have to insert the line:
<script type="text/javascript" src="template/inc_js/jquery/jquery-1.3.2.min.js"></script>

Thanks’ jsw_nz for the pointing.

Thanks Habi for this nice RT

[Rainer G]

Irgendwie scheint da Code direkt sichtbar auf die Seite gekommen zu sein.

http://www.pixelfieber.ch/index.php?privatkunden

Bringt unten:

Code: Select all

rray
(
    [phpwcmsSessionInit] => 1
    [shopping_cart] => Array
        (
        )

)

[jsw_nz]

EXCELLENT
leveraging wcms -

i think you need to even out the widths of the 'scroll area' categories - just a wee suggestion
- one i would make to myself - so guessing just a personal taste

- anyway really nice site with tons of stuff going on - respect.

I like the idea of scroll area for wcms ..... - but I have encountered a library conflict between mootools/slimbox and this
implementation - spent more that a couple hours (four library file edits) trying to implement noConflict - but this one
is a daisy - four files - if you or others have time - might want to try clickToEnlarge
lightbox (mootools/slimbox) - it breaks the code.....(at least for me) - ahhhh

I have a jQuery version as a workaround - at least at this stage.

[joyswap]

It would be better to use content part Tabs for it in combination with customized template.

Würde ich ja, aber könnte man da noch einen AutoSlide einbauen in den Register Tabs? Wie dieses Beispiel zeigt http://www.ndoherty.biz/demos/coda-slid ... #example-2

[Oliver Georgi]

Ich habe diverse Lösungen hierfür bereits umgesetzt. Auf jQuery und MooTools Basis. Müsste ich aber heraussuchen, nur leider keinerlei Zeit dafür augenblicklich.