Is it possible to preset new popup browser to 640 x 480 pixels

[countrydj]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I am trying this script, which I find exceptionally good.
However, when I click on a picture and open a larger picture in a new browser, I would like it to open to a preset size of 640 x 480 pixels.

Is this possible and if so, how do I do it ???

Thanks,

John C

[Beverleyh]

If you're hyperlinking to a standalone image file (one that isn't embedded as part of another web page) the size shown on screen will be the size (dimensions) of the actual image, unless the window is too small, and then the browser will shrink the image to fit. If this is the case, the only way to guarentee an image being shown on screen at 640 x 480 pixels is to actually resize it to those dimensions prior to putting them online.

If you need more help, or you are using a different method to link to an image, please post a link to your page.

[jscheuer1]

I'm not sure I agree, or maybe I'm misunderstanding. In any case, if you already have Ultimate fade, and have it setup to have each image in it linked to another and each of these other images is already 640 x 480, and already opens in a new window (all that can be configured in the slideshow) and you just want to control the size of that new window, although I wouldn't recommend it, it can be done. I would recommend using a lightbox type script instead.

That said, just add this highlighted code after the on page fadeslideshow initialization:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/h . . .

		 . . . ation (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

jQuery(function($){
	$('.gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

You might want to use slightly larger numbers to account for the browser's scrollbars, edges, status bar, etc. Like instead of:

'width=640, height=480'

maybe:

'width=665, height=540'

The browser cache may need to be cleared and/or the page refreshed to see changes.

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.

[Beverleyh]

We might be interpreting the request differently - one of us answering with regard to resizing the image, the other answering with regard to resizing the browser window.

As far as I know (on last attempt, which was a few years ago due to the now lesser practice of trying to control the size of browser windows on behalf of a user) IE browser window size can be manipulated easily but I dont remember Firefox, Opera or Safari being so predictable - at least it used to be that way - from memory, they would just open another window as another tab at full screen. Thinking on, that might be the way now too with IE since that got a tabbed interface. I haven't tried with Chrome. I'm not sure what happens with newer versions of all the browsers so I'm curious to try.

But as John previously said, its not recommended to try to manipulate the size of a browser window, or keep opening new ones; the sizing isn't guaranteed (or its difficult to predict/achieve) and it is now considered bad practise - not so bad to open new windows when linking to other/external sites, but within the same site, its a no-no - let the user decide via right-click. Of course, opening images as a new browser window causes a quandary, but typically, nowadays, webmasters will integrate a light box to eliminate the need for new windows.

I guess it boils down to what you're actually trying to achieve, so some clarification and a page link would be good.

[countrydj]

Hi Folks...

Many thanks for your replies.
I don't know what went wrong, but I did answer Beverleyh yesterday.
My reply obviously hasn't registered.

Here goes again...
My URL is:
http://touringcaravanclub.co.uk/chiltern/chiltern.php
If you take a look at this page (which is under construction and experiment) you will see the slideshow (4) down the right hand side.
The second one down is the one that I have put the links on.
I have also resized the photos being linked to, to 640 x 480 pixels.
When I click on a scrolling photo, it opens up in a new full size browser with the photo in the middle.
What I an looking to do is to click on the link and it open up into a popup browser that is 640 x 480 pixels.

Here is an example of what I am looking for:
http://www.ckmarquees.co.uk/
If you take a look at this page you will see scrolling pictures across the top.
If you click on one of these pictures it will open up in a pop-up browser.

I hope this will make it clearer what I am trying to do.

Once again, thanks very much for your help.

John C

[countrydj]

Oooops !!!!

AFTER I posted my last reply, I checked the code that jscheuer1 suggested and it worked for me exactly as I want it to.

THANK YOU VERY MUCH...

John C

[jscheuer1]

Great! However, I didn't realize you had two shows that you wanted to do that to. In some browsers having that added code more than once might cause problems. You should fine tune it by also using the wrapperid in the selector and only putting it after slideshows that you want to do that and that are setup to link the images. So the first one should be removed, that slideshow has no links, the second one should be:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [180, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/regions/chiltern_sm5.jpg", "../photos/regions/chiltern5.jpg", "_new", "This is Davids caravan"],
		["../photos/regions/chiltern_sm6.jpg", "../photos/regions/chiltern6.jpg", "_new", "chiltern6.jpg"],
		["../photos/regions/chiltern_sm7.jpg", "../photos/regions/chiltern7.jpg", "_new", "chiltern7.jpg"],
		["../photos/regions/chiltern_sm8.jpg", "../photos/regions/chiltern8.jpg", "_new", "chiltern8.jpg"],
		["../photos/regions/chiltern_sm9.jpg", "../photos/regions/chiltern9.jpg", "_new", "chiltern9.jpg"],
		["../photos/regions/chiltern_sm10.jpg", "../photos/regions/chiltern10.jpg", "_new", "chiltern10.jpg"],
		["../photos/regions/chiltern_sm11.jpg", "../photos/regions/chiltern11.jpg", "_new", "chiltern11.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
jQuery(function($){
	$('#fadeshow2 .gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

The third one should be skipped, again because there are no links in that slideshow. The fourth one should be:

var mygallery4=new fadeSlideShow({
	wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
	dimensions: [180, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/regions/chiltern_sm5.jpg", "../photos/regions/chiltern5.jpg", "_new", "This is Davids caravan"],
		["../photos/regions/chiltern_sm6.jpg", "../photos/regions/chiltern6.jpg", "_new", "chiltern6.jpg"],
		["../photos/regions/chiltern_sm7.jpg", "../photos/regions/chiltern7.jpg", "_new", "chiltern7.jpg"],
		["../photos/regions/chiltern_sm8.jpg", "../photos/regions/chiltern8.jpg", "_new", "chiltern8.jpg"],
		["../photos/regions/chiltern_sm9.jpg", "../photos/regions/chiltern9.jpg", "_new", "chiltern9.jpg"],
		["../photos/regions/chiltern_sm10.jpg", "../photos/regions/chiltern10.jpg", "_new", "chiltern10.jpg"],
		["../photos/regions/chiltern_sm11.jpg", "../photos/regions/chiltern11.jpg", "_new", "chiltern11.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
jQuery(function($){
	$('#fadeshow4 .gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

Another thing to think about is - what happens if you open one of these and then, before closing it, open another? With "_new", it will reuse the same window, but that window will go behind the window with the slideshow in it. You can try focussing the window, but Opera and Chrome (the most or second most used browser) won't do that. So you could use "_blank", which will not reuse the window, rather making a new window for each larger image. The only problem there is that you can end up with an unlimited number of these windows if the user doesn't close them. You can try closing the previous window before opening a new one, but some browsers might not allow that either. But that might be the best shot:

So, of the two that are now remaining, the first would be:

jQuery(function($){
	$('#fadeshow2 .gallerylayer a').click(function(e){
		try{$.fn.mynewwin.close();}catch(e){}
		$.fn.mynewwin = window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

The second:

jQuery(function($){
	$('#fadeshow4 .gallerylayer a').click(function(e){
		try{$.fn.mynewwin.close();}catch(e){}
		$.fn.mynewwin = window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

I just tested that and it seems to work out quite well.

[countrydj]

Hi jscheuer1 ...

Thank you so very much for your help and invaluable advice.
As a matter of fact, there are 4 fadeshows on that page.

When I have got all this sorted out, I have to do the same on another 20 regions.

I also have to do something similar on 6 other non regional pages.
I need some help with this.
Please see the bottom of this post.

I have now changed the script that you sent to me, to:

jQuery(function($){
	$('#fadeshow1 .gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

jQuery(function($){
	$('#fadeshow2 .gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

jQuery(function($){
	$('#fadeshow3 .gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

jQuery(function($){
	$('#fadeshow4 .gallerylayer a').click(function(e){
		window.open(this.href, this.target, 'width=640, height=480');
		e.preventDefault();
	});
});

As yet, I haven't put the photos and links in the script. I haven't been supplied with them YET...

However, on a different note.
Is this forum for dynamicdrive scripts ONLY, or can I ask another javascript question that is not written by dynamicdrive ???
I actually need some advice on another script, but I don't want to abuse this forum.

Once again, I really am very greatful for your help and advice.

THANK YOU !!!

John C

[Beverleyh]

Ask any question you like - DD specific or otherwise. There are many talented people here who can help you with lots of web/hardware/general IT queries. Just post your question, and sample pages/scripts where necessary, in the most appropriate forum. For more considerable help requests you can also post in the paid help forum.

[jscheuer1]

If all of the fadeslideshows on the page either need this or have no links, then we can simplify things.

First, even without this, you don't need a separate script tag for each show. You need one external tag for jQuery, you already have that, and then one external tag for the main script, you have that. Then one internal script tag for all of the initializations plus one bit of added code at the end (which no longer needs the wrapperid selector) if you want to use the new window thing for the slideshows that have links:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../files/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: "fadeshow", //ID of blank DIV on page to house Slideshow
	dimensions: [1000, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/headers/header1.jpg", "", "", ""],
		["../photos/headers/header2.jpg", "", "", ""],
		["../photos/headers/header3.jpg", "", "", ""],
		["../photos/headers/header4.jpg", "", "", ""],
		["../photos/headers/header5.jpg", "", "", ""],
		["../photos/headers/header6.jpg", "", "", ""],
		["../photos/headers/header7.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

var mygallery1=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [180, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/regions/chiltern1.jpg", "", "", ""],
		["../photos/regions/chiltern2.jpg", "", "", ""],
		["../photos/regions/chiltern3.jpg", "", "", ""],
		["../photos/regions/chiltern4.jpg", "", "", ""],
		["../photos/regions/chiltern5.jpg", "", "", ""],
		["../photos/regions/chiltern6.jpg", "", "", ""],
		["../photos/regions/chiltern7.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [180, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/regions/chiltern_sm5.jpg", "../photos/regions/chiltern5.jpg", "_new", "This is Davids caravan"],
		["../photos/regions/chiltern_sm6.jpg", "../photos/regions/chiltern6.jpg", "_new", "chiltern6.jpg"],
		["../photos/regions/chiltern_sm7.jpg", "../photos/regions/chiltern7.jpg", "_new", "chiltern7.jpg"],
		["../photos/regions/chiltern_sm8.jpg", "../photos/regions/chiltern8.jpg", "_new", "chiltern8.jpg"],
		["../photos/regions/chiltern_sm9.jpg", "../photos/regions/chiltern9.jpg", "_new", "chiltern9.jpg"],
		["../photos/regions/chiltern_sm10.jpg", "../photos/regions/chiltern10.jpg", "_new", "chiltern10.jpg"],
		["../photos/regions/chiltern_sm11.jpg", "../photos/regions/chiltern11.jpg", "_new", "chiltern11.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

var mygallery3=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
	dimensions: [180, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/headers/header1.jpg", "", "", ""],
		["../photos/headers/header2.jpg", "", "", ""],
		["../photos/headers/header3.jpg", "", "", ""],
		["../photos/headers/header4.jpg", "", "", ""],
		["../photos/headers/header5.jpg", "", "", ""],
		["../photos/headers/header6.jpg", "", "", ""],
		["../photos/headers/header7.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

var mygallery4=new fadeSlideShow({
	wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
	dimensions: [180, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["../photos/regions/chiltern_sm5.jpg", "../photos/regions/chiltern5.jpg", "_new", "This is Davids caravan"],
		["../photos/regions/chiltern_sm6.jpg", "../photos/regions/chiltern6.jpg", "_new", "chiltern6.jpg"],
		["../photos/regions/chiltern_sm7.jpg", "../photos/regions/chiltern7.jpg", "_new", "chiltern7.jpg"],
		["../photos/regions/chiltern_sm8.jpg", "../photos/regions/chiltern8.jpg", "_new", "chiltern8.jpg"],
		["../photos/regions/chiltern_sm9.jpg", "../photos/regions/chiltern9.jpg", "_new", "chiltern9.jpg"],
		["../photos/regions/chiltern_sm10.jpg", "../photos/regions/chiltern10.jpg", "_new", "chiltern10.jpg"],
		["../photos/regions/chiltern_sm11.jpg", "../photos/regions/chiltern11.jpg", "_new", "chiltern11.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

jQuery(function($){
	$('.gallerylayer a').click(function(e){
		e.preventDefault();
		try{$.fn.mynewwin.close();}catch(e){}
		$.fn.mynewwin = window.open(this.href, this.target, 'width=640, height=480');
	});
});
</script>