Home
> SlideshowBox 1(discontinued version)
> Topic
Start with Certain Index And By-Default Full Screen mode
Posted by user418461
Start with Certain Index And By-Default Full Screen mode October 19, 2010 09:42AM | Registered: 13 years ago Posts: 18 |
Awesome slideshow!! Two quick queries here, which would really help me though. I am using panAndZoom JS slideshow template.
1) Say there are 10 images, Right now slideshow starts from 1st image, instead I would like to start slideshow at 5th image, Is that possible?
2) To view full screen mode we need to click on "Full-Screen" Button, By default can we have full screen slideshow at loading time?
Thanks
1) Say there are 10 images, Right now slideshow starts from 1st image, instead I would like to start slideshow at 5th image, Is that possible?
2) To view full screen mode we need to click on "Full-Screen" Button, By default can we have full screen slideshow at loading time?
Thanks
Re: Start with Certain Index And By-Default Full Screen mode October 19, 2010 10:39AM | Admin Registered: 13 years ago Posts: 248 |
Hello,
1. Sure you can do that, there is a property selectedIndex which has exactly the functionality you need.
2.Unfortunately there isn't any method or property that makes this possible unless you do it yourself by creating a button and on click you set the display state to full screen.
stage.displayState=StageDisplayState.FULL_SCREEN;
1. Sure you can do that, there is a property selectedIndex which has exactly the functionality you need.
2.Unfortunately there isn't any method or property that makes this possible unless you do it yourself by creating a button and on click you set the display state to full screen.
stage.displayState=StageDisplayState.FULL_SCREEN;
Re: Start with Certain Index And By-Default Full Screen mode October 19, 2010 12:38PM | Registered: 13 years ago Posts: 18 |
Thanks Kneo for the feedback.
Unfortunately selectedIndex not worked for me. Let me know show you my example. I have total 10 images in xml. I used,
selectedIndex:"2"
So it should start with third image, if we consider base index is 0. But it's not the case :-(, plz look at my code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[www.w3.org];
<html>
<head>
<title>SlideshowBox Embed Code Test</title>
<style type="text/css">body {margin: 0; padding: 0; text-align: center; background-color: #000000;} div {position: relative; margin: auto; text-align: center;}</style>
<script type="text/javascript">
<!-- Begin Vertical alignment -->
function getWindowHeight() {var windowHeight = 0; if (typeof(window.innerHeight) == 'number') {windowHeight = window.innerHeight;} else {if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight;} else { if (document.body && document.body.clientHeight) {windowHeight = document.body.clientHeight;}}} return windowHeight;}
function setContent() {if (document.getElementById) {var windowHeight = getWindowHeight(); if (windowHeight > 0) {var contentElement = document.getElementById('content'); var contentHeight = contentElement.offsetHeight; if (windowHeight - contentHeight > 0) {contentElement.style.position = 'relative';contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';}else { contentElement.style.position = 'static';}}}}
window.onload = function() {setContent();}
window.onresize = function() {setContent();}
<!-- END Vertical alignment -->
</script>
</head>
<body>
<div id="content">
<!-- Insert your embed code below -->
<div id="PanAndZoomJS1276255579612" style="width:800px;height:600px;"></div>
<script type="text/javascript" src="PanAndZoom.js"></script>
<script type="text/javascript">
(function() {
var err;
try{
$.slideshowBoxEmbedCanvas.init({
appendToID:"PanAndZoomJS1276255579612",
imagesXmlPath:"source.xml",
width:800,
height:600,
autoHideControls:"true",
autoSlideShow:"true",
backgroundVisible:"true",
loadOriginalImages:"false",
slideShowSpeed:"6",
backgroundColor:"#1C1C1C",
backgroundImage:"",
scaleBackground:"true",
controlBarAlpha:"1",
controlBarPrimaryColor:"#333333",
controlBarSecondaryColor:"#CCCCCC",
slideShowControls:"true",
fullScreenButton:"true",
controlsHideSpeed:"2",
showImageInfos:"true",
showImageIndex:"false",
textColor:"#FFFFFF",
textBackgroundAlpha:"0.5",
textBackgroundColor:"#000000",
scaleMode:"scaleCrop",
effect:"random",
selectedIndex:"2",
});
}catch(err){}
})();
</script>
<!-- Embed code ends here -->
</div>
</body>
</html>
Unfortunately selectedIndex not worked for me. Let me know show you my example. I have total 10 images in xml. I used,
selectedIndex:"2"
So it should start with third image, if we consider base index is 0. But it's not the case :-(, plz look at my code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[www.w3.org];
<html>
<head>
<title>SlideshowBox Embed Code Test</title>
<style type="text/css">body {margin: 0; padding: 0; text-align: center; background-color: #000000;} div {position: relative; margin: auto; text-align: center;}</style>
<script type="text/javascript">
<!-- Begin Vertical alignment -->
function getWindowHeight() {var windowHeight = 0; if (typeof(window.innerHeight) == 'number') {windowHeight = window.innerHeight;} else {if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight;} else { if (document.body && document.body.clientHeight) {windowHeight = document.body.clientHeight;}}} return windowHeight;}
function setContent() {if (document.getElementById) {var windowHeight = getWindowHeight(); if (windowHeight > 0) {var contentElement = document.getElementById('content'); var contentHeight = contentElement.offsetHeight; if (windowHeight - contentHeight > 0) {contentElement.style.position = 'relative';contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';}else { contentElement.style.position = 'static';}}}}
window.onload = function() {setContent();}
window.onresize = function() {setContent();}
<!-- END Vertical alignment -->
</script>
</head>
<body>
<div id="content">
<!-- Insert your embed code below -->
<div id="PanAndZoomJS1276255579612" style="width:800px;height:600px;"></div>
<script type="text/javascript" src="PanAndZoom.js"></script>
<script type="text/javascript">
(function() {
var err;
try{
$.slideshowBoxEmbedCanvas.init({
appendToID:"PanAndZoomJS1276255579612",
imagesXmlPath:"source.xml",
width:800,
height:600,
autoHideControls:"true",
autoSlideShow:"true",
backgroundVisible:"true",
loadOriginalImages:"false",
slideShowSpeed:"6",
backgroundColor:"#1C1C1C",
backgroundImage:"",
scaleBackground:"true",
controlBarAlpha:"1",
controlBarPrimaryColor:"#333333",
controlBarSecondaryColor:"#CCCCCC",
slideShowControls:"true",
fullScreenButton:"true",
controlsHideSpeed:"2",
showImageInfos:"true",
showImageIndex:"false",
textColor:"#FFFFFF",
textBackgroundAlpha:"0.5",
textBackgroundColor:"#000000",
scaleMode:"scaleCrop",
effect:"random",
selectedIndex:"2",
});
}catch(err){}
})();
</script>
<!-- Embed code ends here -->
</div>
</body>
</html>
Re: Start with Certain Index And By-Default Full Screen mode October 19, 2010 01:49PM | Admin Registered: 13 years ago Posts: 248 |
Re: Start with Certain Index And By-Default Full Screen mode October 21, 2010 05:24AM | Registered: 13 years ago Posts: 18 |
Re: Start with Certain Index And By-Default Full Screen mode October 27, 2010 02:03PM | Admin Registered: 13 years ago Posts: 248 |
Re: Start with Certain Index And By-Default Full Screen mode November 01, 2010 06:53AM | Registered: 13 years ago Posts: 18 |
Ok by default full screen seems to be working with this little javascript code. I am using javascript version of zoomPan slideshow.
var intDefaultFullScreenTimer;
$(document).ready(function() {
intDefaultFullScreenTimer = setInterval(doFullScreenOnLoad, 25);
});
function doFullScreenOnLoad() {
$.slideshowBoxPanAndZoom.fw();
}
Also little change to core javascript's "fw" function,
fw: function () {
if (this.canvas == null) {return;} // by developer
if (this.aO() || this.canvas.bO()) {
return;
}
clearInterval(intDefaultFullScreenTimer); // by developer
clearTimeout(this.aL);
this.canvas.fm();
}
Edited 2 time(s). Last edit at 11/01/2010 06:56AM by user418461.
var intDefaultFullScreenTimer;
$(document).ready(function() {
intDefaultFullScreenTimer = setInterval(doFullScreenOnLoad, 25);
});
function doFullScreenOnLoad() {
$.slideshowBoxPanAndZoom.fw();
}
Also little change to core javascript's "fw" function,
fw: function () {
if (this.canvas == null) {return;} // by developer
if (this.aO() || this.canvas.bO()) {
return;
}
clearInterval(intDefaultFullScreenTimer); // by developer
clearTimeout(this.aL);
this.canvas.fm();
}
Edited 2 time(s). Last edit at 11/01/2010 06:56AM by user418461.
Re: Start with Certain Index And By-Default Full Screen mode March 10, 2011 03:46PM | Registered: 13 years ago Posts: 1 |
Hello,
I have exactly the same problem as I wanted to start a js-Slideshow with a specific image. I finally found this thread, but however the code below doesn't work. Could you please tell me where do I have to paste this code snippet (Using PanAndZoom with the newest js-Files and the Code from the online template, which works pretty well) ?
I put it in nearly ever< possible and impossible position, but the Browser always displays the error message:
Expected ')' in the line where ssb.openLargeImage(5); is written, when I copy the snippet in the js-Code
Perhaps there is meanwhile another "easier" solution to this problem ?!
Thanks for helping
P.S.: I solved the Fullscreen-Problem executing the following line in the body onload section:
$.slideshowBoxEmbedCanvas.showFullScreen();
Is there something wrong with this ? (I am not an JS-Expert, but it works as far as I can say ;-)
kneo Wrote:
-------------------------------------------------------
> Well, after all it seems there is a way to start
> the slideshow at a specified image:
> ssb.addEventListener(SlideshowBoxEvent.INIT,
> initHandler)
> function initHandler(ev:SlideshowBoxEvent):void{
> ssb.openLargeImage(5);
> }
Edited 1 time(s). Last edit at 03/10/2011 03:51PM by user510521.
I have exactly the same problem as I wanted to start a js-Slideshow with a specific image. I finally found this thread, but however the code below doesn't work. Could you please tell me where do I have to paste this code snippet (Using PanAndZoom with the newest js-Files and the Code from the online template, which works pretty well) ?
I put it in nearly ever< possible and impossible position, but the Browser always displays the error message:
Expected ')' in the line where ssb.openLargeImage(5); is written, when I copy the snippet in the js-Code
Perhaps there is meanwhile another "easier" solution to this problem ?!
Thanks for helping
P.S.: I solved the Fullscreen-Problem executing the following line in the body onload section:
$.slideshowBoxEmbedCanvas.showFullScreen();
Is there something wrong with this ? (I am not an JS-Expert, but it works as far as I can say ;-)
kneo Wrote:
-------------------------------------------------------
> Well, after all it seems there is a way to start
> the slideshow at a specified image:
> ssb.addEventListener(SlideshowBoxEvent.INIT,
> initHandler)
> function initHandler(ev:SlideshowBoxEvent):void{
> ssb.openLargeImage(5);
> }
Edited 1 time(s). Last edit at 03/10/2011 03:51PM by user510521.
Re: Start with Certain Index And By-Default Full Screen mode March 11, 2011 07:03AM | Admin Registered: 13 years ago Posts: 248 |
Re: Start with Certain Index And By-Default Full Screen mode September 10, 2011 08:13PM | Registered: 12 years ago Posts: 2 |
Re: Start with Certain Index And By-Default Full Screen mode September 13, 2011 06:29AM | Admin Registered: 13 years ago Posts: 248 |
Re: Start with Certain Index And By-Default Full Screen mode November 09, 2011 07:26PM | Registered: 12 years ago Posts: 1 |
@kneo
Hi!
Clarification/Question regarding full screen mode - I have a requirement to NOT display the slideshow at all on my page loads; however, the slideshow should start and display in full screen mode when a particular link is clicked on the the page. Based on one of your replies, it sounds like this may be possible with the flash version although it is unclear whether the button you are referencing is external to the SWF or if it can simply be a button/link on the page. Can you confirm this approach is possible and provide a if possible, provide a code sample as well?
Thanks!
Hi!
Clarification/Question regarding full screen mode - I have a requirement to NOT display the slideshow at all on my page loads; however, the slideshow should start and display in full screen mode when a particular link is clicked on the the page. Based on one of your replies, it sounds like this may be possible with the flash version although it is unclear whether the button you are referencing is external to the SWF or if it can simply be a button/link on the page. Can you confirm this approach is possible and provide a if possible, provide a code sample as well?
Thanks!
Sorry, only registered users may post in this forum.