Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
(Please disregard)
I am asking for help in making a slideshow. This slideshow should have start/stop buttons, and better to have an option for setting up playing interval. There will be as many as 600 images to show. These images will be dynamically generated/converted from other engineering files, and generated pictures will remain as cache for replaying, but the server side cache will be cleared when the session is closed.
I really have no idea about this. Maybe you can point me out which way to go. Thanks in advance.
Push
To get started, you could check out this thread: http://www.zkoss.org/forum/listComment/18466-Wanted-Sliding-container.
Thanks Richard,
first try runs. I will have a look on it.
thanks
Stephan
Hmmmm, it runs locally but not on the web server. On the web server the page where the slideshow is in will not load full. The 'processing' message stays still.
regards
Stephan
Yeah, thanks Richard. 'easyslider1.7.js' in Windows is not 'easySlider1.7.js' in Linux
Two things are not solved.
1. All Images are showing a little piece of an other image at the left side. (Images are scaled/stored as 400x230px jpg's )
var w = 400;//$("li", obj).width();
var h = 250;//$("li", obj).height();
2. after login and come back to this side the controller generated stuff for the table statistics are not showed in the Chrome Browser.
2.1 In IE the table statistic stuff is not rendered.
http://www.zk-web.de/zksample2/index.zul
any idea
best Stephan
. . . <cell width="50%" style="padding: 0px;" hflex="1"> <include src="/test/slider4.zul"></include> </cell> </hbox> </div> </north> <center id="bl_center" border="none" style="background-color: #EBEBEB" flex="true" ></center> <south id="bl_south" border="none" style="background-color: #EBEBEB" height="32px" ></south> </borderlayout>
slider4.zul
<!-- http://www.zkoss.org/forum/listComment/18466-Wanted-Sliding-container -->
<zk xmlns:c="client">
<script type="text/javascript"
src="js/easyslider1.7/js/easySlider1.7.js">
</script>
<script type="text/javascript">
zk.afterMount(function() { jq("$slider").easySlider({ auto:
true, continuous: true, numeric: true }); });
</script>
<style src="js/easyslider1.7/css/screen.css" ></style>
<div id="slider">
<n:ul xmlns:n="native">
<n:li>
<image
src="/images/slider/zksample2_dashboard_400x230.jpg" ></image>
</n:li>
<n:li>
<image
src="/images/slider/zksample2_loginslog_400x230.jpg" ></image>
</n:li>
<n:li>
<image
src="/images/slider/zksample2_calendar_400x230.jpg" ></image>
</n:li>
<n:li>
<image src="/images/slider/zksampl2_chart_400x230.jpg" ></image>
</n:li>
<n:li>
<image
src="/images/slider/zksample2_many_modal_windows_400x230.jpg" ></image>
</n:li>
</n:ul>
</div>
</zk>
Yes, the little piece of image annoyed me for a while too. In the end, I just hard coded the margin-left to -40, but the images aren't in the same order as in the zul file (that's easily configurable, though, and at least it works and displays properly). If you find a better solution, please let me know. I also added in a mouseover/out functionality to stop and start the slider. Here's the .js file:
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 400,
auto: false,
pause: 6000,//6 seconds
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = 500;//$("li", obj).width();
var h = 241;//$("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-40px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
jq("$slider").mouseenter(function(){
animate("stop",true);
});
jq("$slider").mouseleave(function(){
animate("next",true);
});
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
case "stop":
t = t;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{
marginLeft: p
},
{
queue:false,
duration:speed,
complete:adjust
}
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{
marginTop: p
},
{
queue:false,
duration:speed,
complete:adjust
}
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){
;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){
;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);Yes Richard,
many thanks. In Chrome browser it's now OK with this left side piece of the image.
But now it's in IE browser on the right side the same as before in Chrome :-)
I will have a deep Google search on weekend for an other solution. :-)
thanks
Stephan
Got it! Put this styling in the ul element:
<n:ul style="padding:0;margin:0">
Disregard my last post - replace the .js file with the original keeping the hard-coded width and height:
var w = 500;//$("li", obj).width();
var h = 241;//$("li", obj).height(); And it should work fine in all browsers.
Got it too :-)
Many many thanks Richard. You save my day.
If i put the slider.zul as an Include component in a Panel/PanelChildren combination it renders now correctly after come back to this side.
<panel height="231px"> <panelchildren style="background-color: #EBEBEB"> <include src="/test/slider4.zul" ></include> </panelchildren> </panel>
Tested in Chrome, IE and Firefox.
thanks
Stephan
Asked: 2012-01-13 00:17:51 +0800
Seen: 493 times
Last updated: Feb 06 '12