Page 1 of 2 12 LastLast
Results 1 to 10 of 17

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

  1. #1
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    'width=640, height=480'
    maybe:

    Code:
    '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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    countrydj (04-13-2013)

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.
    Last edited by Beverleyh; 04-13-2013 at 06:53 AM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #5
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #6
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    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:

    Code:
    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    countrydj (04-13-2013)

  10. #8
    Join Date
    Apr 2013
    Location
    Preston, Lancashire, UK
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    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

  11. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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>
    Last edited by jscheuer1; 04-14-2013 at 07:52 AM. Reason: fix typo in code, move up preventDefault
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Preset chained selects
    By crazymao in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-27-2012, 08:51 AM
  2. Replies: 1
    Last Post: 03-30-2008, 12:28 PM
  3. Pop-it menu preset positioning?
    By Arothman in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-08-2006, 02:33 PM
  4. Replies: 6
    Last Post: 07-06-2006, 01:59 PM
  5. parameter from main browser to popup
    By detieubao in forum JavaScript
    Replies: 4
    Last Post: 04-24-2006, 09:05 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •