Hi,
i'm a beginner in JS and JqueryUI, im working on a vertical
Slidergallery, and i can not fix a problem.
My Page work on a CMS (contenido, http://www.contenido.org/).
I want to build this Gallery very simplewith the tutorial (http://
jqueryfordesigners.com/slider-gallery/)
My customer(dau) should post Images in the Text-Editor of the CMS(the
only way he understand),
the Editor build a <p> element around the images.
The UI Slider function build a Scrollhandler, it is working fine, it
changed the position perfektly, but the handler does not move the <p>
Element.
If i put a console.log("blub"); in
.....slide: function (event, ui) { console.log("blub");}, .....
nothing happend in the console.
I think here is the Problem, but i have no idea why!?
...slide: function (event, ui) ...
...stop: function (event, ui) ...
both are not working...
productWidth has a correct value, something about 1800px,
<this> has the value div.bilderslider
<p> has the correct element
sry i have no live example, i working on a local vmware.
but here is my code:
My HTML:
.....
<div id="contentrechts">
<div class="bilderslider">
<p>
<img border="0" src="upload/testgal/01.jpg"/>
<img border="0" src="upload/testgal/03.jpg"/>
<img border="0" src="upload/testgal/04.jpg"/>
<img border="0" src="upload/testgal/03.jpg"/>
</p>
<div class="slider ui-slider">
<a href="javascript:void(0)">
<div class="handle" style="left: 192px;"> </div>
</a>
</div>
</div>
</div>
....
Javascript:
$(window).ready(function() {
$('div.bilderslider').each(function() {
var p = $('p', this);
var productWidth = p.innerWidth() - $(this).outerWidth();
$('.slider', this).slider({
handle: '.handle',
minValue: 0,
maxValue: productWidth,
slide: function (event, ui) {
p.css('right', ui.value * -1);
},
stop: function (event, ui) {
p.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
}
});
});
});
My CSS
.bilderslider
{
overflow: hidden;
position: relative;
padding: 10px;
height: 260px;
width: 960px;
}
.bilderslider p {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.bilderslider p img {
display: inline;
margin-top:25px;
}
.handle
{
position: absolute;
cursor: move;
top: 0;
z-index: 100;
height: 20px;
width: 20px;
background-color:#cfbf87;
margin-top:-8px;
}
.slider
{
height:20px;
margin-left:5px;
padding:1px;
position:relative;
width:550px;
background-image:url(/contenido/km/images/blackdot.jpg);
background-repeat:repeat-x;
}
thx for help!
Greatings from lake constanz
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
