PDA

View Full Version : Ultimate Fade-in slideshow image resize



optimus203
02-03-2010, 06:25 PM
1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Is there a way to change the heigth and width of photos to be inserted into the slideshow, as opposed to just setting the height an width of slideshow? I have larger photos that get cropped by the size that I define for the slideshow, but other photos fit fine. Thanks.

ddadmin
02-03-2010, 07:18 PM
Are you asking for a way to specify explicit width/height attributes for each of the images within the slideshow, so they are resized appropriately and fit inside the slideshow area?

djr33
02-03-2010, 07:37 PM
While this is possible, it is always a better idea to resize images and save them at the new size, rather than trying to resize them on the web page. This is because browsers don't render resized images well: they get blocky and loose detail. If you resize them first in your graphics program then upload them, it will look better. It is also possible to do this as a batch operation (even potentially on the server), if you have a lot of images, so that you convert all of them and then the new copies are the right size.
(It's also possible to resize them dynamically on the server every time they are loaded, but this is a terrible idea because it takes a lot of processing power and would be very slow to load.)

Of course if you want to keep the images larger so that they can be viewed full size (outside the slideshow), then this is probably not possible and you will have to settle for lower quality images in the slideshow (or, potentially, have two sets of images-- upload/load twice for the different versions).

I hope this helps you think about how you want to approach the changes.

Scriptor
06-06-2013, 01:10 PM
While this is possible, it is always a better idea to resize images and save them at the new size, rather than trying to resize them on the web page. This is because browsers don't render resized images well: they get blocky and loose detail. If you resize them first in your graphics program then upload them, it will look better. It is also possible to do this as a batch operation (even potentially on the server), if you have a lot of images, so that you convert all of them and then the new copies are the right size.
(It's also possible to resize them dynamically on the server every time they are loaded, but this is a terrible idea because it takes a lot of processing power and would be very slow to load.)

Of course if you want to keep the images larger so that they can be viewed full size (outside the slideshow), then this is probably not possible and you will have to settle for lower quality images in the slideshow (or, potentially, have two sets of images-- upload/load twice for the different versions).

I hope this helps you think about how you want to approach the changes.


Thank you djr33.

You said this is possible, but can you let me know how it is done. I want to bring in images from various sources (different web sites) and the images will all be different sizes. I need some way that they can resized automatically before being displayed.

The slideshow size is 700x400 ie. dimensions: [700, 400]. So, for example, I 'd like to resize an image that is 900x550 down to 700x400.

I've tried CSS:

<style>
img.resize{height:700px;width:auto;}
</style>

But I have to place class="resize" somewhere in the imagearray, which doesn't work.

I'm sure you have a much better method.

Cheers,

Scriptor

ddadmin
06-06-2013, 05:13 PM
Thank you djr33.

I've tried CSS:

<style>
img.resize{height:700px;width:auto;}
</style>

But I have to place class="resize" somewhere in the imagearray, which doesn't work.


Scriptor

Actually you're close. To get the images in the slideshow to scale and fit, either horizontally or vertically, you can do something like the below in CSS:


<style>

#fadeshow1 img{
width: 250px;
height: auto;
}

</style>

"#fadeshow1" should be the ID of the slideshow DIV, and depending on whether you wish to scale the images to fit horizontally or vertically, set one property to an explicit value, and the other, to auto.

Cheers,

Scriptor
06-06-2013, 06:24 PM
Thank you very much for that DD Admin. It worked perfectly!

Cheers,

Scriptor

Scriptor
06-07-2013, 01:25 PM
Just another quick question:

If a photo exceeds the dimensions of the gallery frame, the photo seems to be cropped off at the right-hand side and at the bottom.

Is there anyway to centre the photo so that it is cropped equally on all sides? Or can the top or left-hand side be cropped?

jscheuer1
06-07-2013, 02:14 PM
That might require a modification to the script which would be easier to work out if we had an example of your page.

Also I would use different css than ddadmin suggests because there are potentially other images in the #fadeshow1 div. If you use ondemand for the captions you have the hide and show images for that. And since virtually all browsers in use today accept max-width and max-height as style, you would get a better resizing - by width or height, whichever will show the largest possible version of the image after resizing to fit the slideshow:


#fadeshow1 .gallerylayer img {
max-width: 250px; /* set this to the width of the slideshow */
max-height: 200px; /* set this to the height of the slideshow */
}

That probably will not help the cropping problem you described, that probably has to do with how the script determines to position the image inside the slideshow and is probably thrown off when the image is no longer in its native dimensions. But it might be other css, we would have to see.

That would be easiest to determine and to fix with an example. Rather than one of us having to make one up, please provide a link to yours:

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Scriptor
06-08-2013, 01:10 PM
Thanks John,

Here is a slideshow page: http://designline.com.au/news/slides-1.htm

Notice that image 3 has the bottom obscured because it's height is larger than the gallery frame. If it was wider, then part of the right-hand side would also be obscured.

So, just wondering if there is a way to handle the position of the image within the gallery frame. In this example, I'd like to reveal the trees at the bottom and lose part of the sky at the top.

Thanks,

Scriptor

jscheuer1
06-08-2013, 02:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: #fff !important; /* set this to the background color behind the slideshow */
}
#fadeshow1 .gallerylayer img {
max-width: 600px; /* set this to the width of the slideshow */
max-height: 330px; /* set this to the height of the slideshow */
display: block;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://designline.com.au/news/js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script><script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [600, 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["background-84604_640.jpg", "", "", ""],
["evening-55067_640.jpg", "", "", ""],
["sky-62732_640.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: ""
})
</script>
</head>
<body>
<div id="fadeshow1">
&nbsp;</div>
<p>&nbsp;</p>
<table width="647" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="201" valign="top"><img src="background-84604_640.jpg" width="200" height="112" align="top"></td>
<td width="12">&nbsp;</td>
<td width="200" valign="top"><img src="evening-55067_640.jpg" width="200" height="112" align="top"></td>
<td width="13">&nbsp;</td>
<td width="221"><img src="sky-62732_640.jpg" width="200" height="125" align="top"></td>
</tr>
<tr>
<td valign="top"><div align="center">1</div></td>
<td>&nbsp;</td>
<td valign="top"><div align="center">2</div></td>
<td>&nbsp;</td>
<td><div align="center">3</div></td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Scriptor
06-08-2013, 11:55 PM
Hi John,

Perhaps my example was not extreme enough to show what I actually wanted to do.

I want the photos to completely fill the gallery frame. That is why I set the max-height to auto, as in slides-2 below. However I would like the ability to position the photo in the frame by moving it up or sideways.

http://designline.com.au/news/slides-2.htm

By changing the max-height to 300px, as in slides-3 below, it means that the photo will not fill the frame.

http://designline.com.au/news/slides-3.htm

Thanks,

Scriptor

jscheuer1
06-09-2013, 02:44 AM
You can do that. But if you do, you cannot maintain aspect ratio. Change this:


#fadeshow1, #fadeshow1 .gallerylayer {
background-color: #fff !important; /* set this to the background color behind the slideshow */
}
#fadeshow1 .gallerylayer img {
max-width: 600px; /* set this to the width of the slideshow */
max-height: 330px; /* set this to the height of the slideshow */
display: block;
}

</style>


to:


<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: #fff !important; /* OPTIONAL set this to the background color behind the slideshow to avoid a color transition while it loads */
}
#fadeshow1 .gallerylayer img {
width: 100%; /* set this to 100% */
height: 100%; /* set this to 100% */
display: block;
}
</style>

Scriptor
06-09-2013, 04:32 AM
Thanks John,

The aspect ratio has to be maintained.

So I guess what you are saying is, there is no way to actually position the image. The top left-hand corner will always remain 0,0. And, depending on the size of the image, the bottom right-hand corner will tend to be obscured by the limits of the gallery frame. I was hoping there would be a way to set the top left-hand corner of the image to say, -20,-50 or something like that.

All the best,

Scriptor

jscheuer1
06-09-2013, 09:40 AM
You cannot do both.

You cannot fit an image into a box that has one aspect ratio, and have it fill that box, and have it maintain its aspect ratio unless its aspect ratio is the same as that box's.

If you want to maintain aspect ratio, then designline.com.au/news/slides-3.htm is the way to go. But for images whose aspect ratio is not (in this casr) 1.1818 (600/330), there will me parts of the box that will not be filled.

If you must fill the 600x330 box with each image, those that do not have an aspect ratio of 1.1818 will either have to be cropped or have their aspect ratio changed (squished or elongated).

This is simple plane geometry and cannot be otherwise, no matter how much you might want it to be.

You could fill the box and maintain aspect ratio and center the image. If it doesn't have the same aspect ratio of the box, it will still be cropped, but cropped evenly on all four sides. That would probably require a script modification, and, as I say the image will still be cropped, which I thought you wanted to avoid. I will work that out for you. But only if cropping and centering is acceptable for images with a different aspect ratio than the slideshow.

Scriptor
06-09-2013, 10:04 AM
Yes, I know that cropping will occur. However, the present script crops the bottom and right, if the image is larger than the box. What I'd like to do is have the option to either crop all round (ie. center the image) or crop the top and left-hand side (ie. offset the image). Offsetting the image would be preferable, since there would presumably be more control over where the image is positioned.

Many thanks.

vwphillips
06-09-2013, 11:54 AM
showslide:function(keyword){
var slideshow=this
var setting=slideshow.setting
if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
return
}
var totalimages=setting.imagearray.length
var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
// $slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({position:'absolute',top:(setting.dimensions[1]-imgdimensions[1])/2,marginTop:0})
$slideimage.css({left:(setting.dimensions[0]-imgdimensions[0])/2,marginLeft:0})
// $slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
slideshow.showhidedescpanel('hide', 0) //and hide it immediately
}
setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
clearTimeout(setting.playtimer)
try{
setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
}catch(e){
alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
}
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
slideshow.showhidedescpanel('show')
setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
}
setting.currentstep+=1
if (setting.displaymode.type=="auto"){
if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
}
}) //end callback function
setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
setting.fglayer=setting.bglayer
setting.bglayer=(setting.bglayer==0)? 1 : 0
setting.curimage=imgindex
if (setting.$descpanel){
setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
if (setting.imagearray[imgindex][3]) //if this slide contains a description
setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
}
if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
this.paginatecontrol()
}
if (setting.$status) //if status container defined
setting.$status.html(setting.curimage+1 + "/" + totalimages)
},



or


showslide:function(keyword){
var slideshow=this
var setting=slideshow.setting
if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
return
}
var totalimages=setting.imagearray.length
var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
document.getElementById(setting.wrapperid).sdtyle.height=imgdimensions[1]+'px';
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
slideshow.showhidedescpanel('hide', 0) //and hide it immediately
}
setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
clearTimeout(setting.playtimer)
try{
setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
}catch(e){
alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
}
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
slideshow.showhidedescpanel('show')
setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
}
setting.currentstep+=1
if (setting.displaymode.type=="auto"){
if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
}
}) //end callback function
setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
setting.fglayer=setting.bglayer
setting.bglayer=(setting.bglayer==0)? 1 : 0
setting.curimage=imgindex
if (setting.$descpanel){
setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
if (setting.imagearray[imgindex][3]) //if this slide contains a description
setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
}
if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
this.paginatecontrol()
}
if (setting.$status) //if status container defined
setting.$status.html(setting.curimage+1 + "/" + totalimages)
},



#fadeshow1 .gallerylayer img {
width: 600px; /* set this to the width of the slideshow */
}

jscheuer1
06-09-2013, 12:56 PM
OK, in your new fadeSlideShow on page call you can add optional crop objects after each image listing in the imagearray:


</script><script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [600, 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["background-84604_640.jpg", "", "", ""],
["evening-55067_640.jpg", "", "", ""], {crop: 'topleft'},
["big-bend-113099_640.jpg", "", "", ""], {crop: 'center'} //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: ""
})
</script>

Use this css:


<style type="text/css">
#fadeshow1 .gallerylayer img {
display: block;
}
.fadeshow1tall {
width: 100%; /* set this to 100% */
height: auto; /* set this to auto */
}
.fadeshow1wide {
width: auto; /* set this to auto */
height: 100%; /* set this to 100% */
}
.fadeshow1even {
width: 100%; /* set this to 100% */
height: 100%; /* set this to 100% */
}
</style>

and this script (right click and 'Save As'):

5089

Notes:

If the image fits or is smaller, it will be centered as was always the case. However, if it's smaller it will be made the width of the slideshow and centered vertically unless its height is now greater than the slideshow's, in which case crop, if specified will determine how it's cropped.

If crop is set for 'topleft' and the image is too large, the top and/or left part will be cropped.

If crop is set for 'center' and the image is too large it will be center cropped along the vertical and/or horizontal axis.

If no crop is specified or something other than these two above are used, and the image is too large, it will be cropped off the right and/or bottom edge (what happens normally without this modification).

Scriptor
06-09-2013, 01:10 PM
Thanks John,

Looks simple enough, but it doesn't seem to work unfortunately. Plus, there is an undefined image after the 3rd photo.

http://designline.com.au/news/slides-8.htm

jscheuer1
06-09-2013, 01:18 PM
You need to download and use the modified script. Here it is again (right click and 'Save As'):

5090

Scriptor
06-09-2013, 01:33 PM
Hi John,

This works fine. Thanks very much for your time. Hopefully your good work will also help someone else.

Cheers,

Scriptor

Scriptor
06-09-2013, 01:55 PM
Just one more slight problem John. On reloading the page, it comes up with an undefined image for a few seconds and then the slideshow begins.

http://designline.com.au/news/slides-8.htm

jscheuer1
06-09-2013, 03:02 PM
Using a text only editor like NotePad, in the fadeslideshowratiocrop.js file, near the beginning, find the configuration area:


var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['http://******/****/ufade/loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}


Change the highlighted to point to your own loading image, like make that:


var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}


You should have downloaded the loading image from the demo page. If not, you can use this one (right click and 'Save As'):

5088 (http://www.dynamicdrive.com/forums/attachment.php?attachmentid=5088&d=1370789973)

Put it in the same folder as your page with the slideshow on it.

Scriptor
06-09-2013, 04:13 PM
Brilliant! Got it now. Many thanks again.

JNSoendergaard
08-01-2013, 11:22 AM
Hi John

I have just started using your script and it works perfectly, except when the image is wider than the slideshow. It scales the image as it should, but it doesn't crop it in the center but istead it cuts of the left side.
Can you help fix this?

jscheuer1
08-01-2013, 03:45 PM
First, are you using the updated script (fadeslideshowratiocrop.js)? And have you added the directive , {crop: 'center'} after that slide's entry in the imagearray, example from the user's before you demo:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [600, 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["background-84604_640.jpg", "", "", ""],
["evening-55067_640.jpg", "", "", ""],
["big-bend-113099_640.jpg", "", "", ""], {crop: 'center'} //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: ""
})

Also as shown in the comment section of the updated script:


//June 9th '13 Custom modification to specify cropping of larger images 'center' or 'topleft', defaults to bottom right crop,
//usage example (in imagearray in the on page new fadeSlideShow call);

/* imagearray: [
["background-84604_640.jpg", "", "", ""],
["evening-55067_640.jpg", "", "", ""], {crop: 'topleft'},
["big-bend-113099_640.jpg", "", "", ""], {crop: 'center'} //<--no trailing comma after very last image element!
],
*/

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

JNSoendergaard
08-01-2013, 04:56 PM
Thanks for the quick response

Yes, I have done all the things listed above, and it works for images heigher than the slideshow, but not for images wider than the slideshow.

here are the code that i am using (it is a bit modified to fit my purpose):


<style type="text/css">
#reklame3 .gallerylayer img {
display: block;
}
.reklame3tall {
width: 100%; /* set this to 100% */
height: auto; /* set this to auto */
}
.reklame3wide {
width: auto; /* set this to auto */
height: 100%; /* set this to 100% */
}
.reklame3even {
width: 100%; /* set this to 100% */
height: 100%; /* set this to 100% */
}
</style>


<script type="text/javascript" src="js/fadeslideshowratiocrop.js">


var reklame3=new fadeSlideShow({
wrapperid: "reklame3", //ID of blank DIV on page to house Slideshow
dimensions: [250, 275], //width/height of gallery in pixels. Should reflect dimensions of largest image

<?php
$imgdir = 'galleri/photos/Hoejre reklame/'; //Pick your folder
$allowed_types = array('png','jpg','jpeg','gif'); //Allowed types of files
$dimg = opendir($imgdir);//Open directory

?>
imagearray: [
<?php
$i = '0';
while($imgfile = readdir($dimg))
{
if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
/*If the file is an image add it to the array*/
{
$a_img[] = $imgfile;

if($i >= 1)
{
?>
,
<?php
}
?>
["galleri/photos/Hoejre reklame/<?php echo $imgfile; ?>"], {crop: 'center'}
<?php
$i++;
}
}

?>
],
displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "none",
togglerid: ""
})

JNSoendergaard
08-01-2013, 05:02 PM
I use the code on this site: http://www.vejlenystenhuggeri.dk/ in the box in the right side of the page, the one under the facebook-box.

I have added these two photos to the slideshow (among others) so you get an idea of what i mean:
http://www.vejlenystenhuggeri.dk/userfiles/image/profil.jpg
http://www.vejlenystenhuggeri.dk/grafik/topgalleri/005.jpg

jscheuer1
08-01-2013, 05:33 PM
Seems fine here. On /grafik/topgalleri/005.jpg it's centered. This script only crops the images, it doesn't resize them unless both their width and their height are too great to fit in the slideshow. If they're both too big, the script chooses the one that's proportionally less out of range and conforms it to the corresponding dimension of the slideshow. Once one of these dimensions is changed to fit, the other is scaled to it and cropped.

Now, the image isn't actually cropped, rather only that part of it that fits in the slideshow is shown. With {crop: 'center'}, that's the center, which is what I see on /grafik/topgalleri/005.jpg

Oh, and you are missing the loading image, see my previous post on that.

JNSoendergaard
08-01-2013, 05:45 PM
Hi again John

Strange, when I look at the slideshow i see the two red hearts which is part of the right side of the picture, I would expect to see the middle part?
Thanks for pointing the loading image out.

jscheuer1
08-01-2013, 06:05 PM
OK, I see (click to enlarge):

5167

What browser are you using?

Oh, and looking at it, I see that, since it's too wide to fit, but not tall enough to fill the slideshow vertically, the script is enlarging it slightly to fit the height. But it is centered.

Hmm, it's centered in IE, Opera, and Firefox, but right aligned in Chrome. Not sure why it's like that in Chrome. I have to run right now. When I have more time I'll look into it.

jscheuer1
08-01-2013, 06:16 PM
I think I've got it, change as highlighted in the style:


<style type="text/css">
#reklame3 .gallerylayer img {
display: inline-block;
}
.reklame3tall {
width: 100%; /* set this to 100% */
height: auto; /* set this to auto */
}
.reklame3wide {
width: auto; /* set this to auto */
height: 100%; /* set this to 100% */
}
.reklame3even {
width: 100%; /* set this to 100% */
height: 100%; /* set this to 100% */
}
</style>

JNSoendergaard
08-01-2013, 06:19 PM
That explains alot, I always use Chrome - thank you very much for your time so far :)

jscheuer1
08-01-2013, 06:40 PM
I think you missed:


I think I've got it, change as highlighted in the style:


<style type="text/css">
#reklame3 .gallerylayer img {
display: inline-block;
}
.reklame3tall {
width: 100%; /* set this to 100% */
height: auto; /* set this to auto */
}
.reklame3wide {
width: auto; /* set this to auto */
height: 100%; /* set this to 100% */
}
.reklame3even {
width: 100%; /* set this to 100% */
height: 100%; /* set this to 100% */
}
</style>

I've since tested it, and it does work in Chrome and doesn't hurt the others.

jscheuer1
08-01-2013, 07:53 PM
Ah, I decided to keep on with this. Anyways, it's not the display property, that fixes it, but shouldn't be a problem. It's that a parent element has text-align: right on it. So the real fix is:


<style type="text/css">
#reklame3 .gallerylayer {
text-align: left;
}
#reklame3 .gallerylayer img {
display: block;
}
.reklame3tall {
width: 100%; /* set this to 100% */
height: auto; /* set this to auto */
}
.reklame3wide {
width: auto; /* set this to auto */
height: 100%; /* set this to 100% */
}
.reklame3even {
width: 100%; /* set this to 100% */
height: 100%; /* set this to 100% */
}
</style>


BTW, I discovered this because I wanted to be able to prevent the script from resizing the images upwards. I've got the script for that now if you're interested. It's an option. unless you set dontscaleup: true, in the new fadeSlideShow() init on the page, it will do it just like it does now.

For your slideshow I think you want it scaling up. Otherwise the profil.jpg and the 005.jpg will not fill the entire slideshow. The profil.jpg would have left and right side matting, the other top and bottom matting. It looks better the way it is now. Here it is (same filename as before):

5170

But for larger slideshows where smaller images would become distorted by being scaled up, it's a nice option.

Example usage:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
noscaleup: true,
togglerid: ""
})

JNSoendergaard
08-01-2013, 08:49 PM
Thank you very much John, everything works as I wanted it to -your help has been very much appreciated.
I don't need the other script right now, but I think it would be nice if you uploaded it, so that if I ,or some else, needs it in the future, they can find it here :)

Thanks again!

jscheuer1
08-01-2013, 09:39 PM
OK, I added it to my previous post.