dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: New to Java

  1. #1
    Join Date
    Nov 2017
    Posts
    3

    New to Java

    Hello i'm trying to open an image in the same window as an overlay and close it when clicked.
    See: www.goreyhc/Hisotry2.html when clicking the newspaper articles i'd like the image to open in the same window and then close when clicked.
    the image opens alright but not in the same dimensions the image is stored.

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,543
    something wrong with the URL. Your missing the Top Level Domain reference, is is a .co.uk, .org, .com???
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Nov 2017
    Posts
    3
    Quote Originally Posted by \\.\ View Post
    something wrong with the URL. Your missing the Top Level Domain reference, is is a .co.uk, .org, .com???
    Sorry here is the right link: http://www.goreyhc.com/History2.html

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,543
    Yes I can see..

    You should set the image size and the viewport size (maybe a large margin or padding) in a CSS rule for the clicked images.

    I would say that it is either a CSS problem, or as I have had a look under the hood (rare for me) the chances are its JQuery (which is not JavaScript nor Java and Java is a different language to JavaScript)

    My suggestion is to find the JQuery part to set the CSS to controlling the image size in the popup.

    It is often better to have a thumbnail image that links to the fill size image, that way the thumbnail will be tiny in file size and it would improve page loading as would processing of all images you want to present online.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Nov 2017
    Posts
    3
    Quote Originally Posted by \\.\ View Post
    Yes I can see..

    You should set the image size and the viewport size (maybe a large margin or padding) in a CSS rule for the clicked images.

    I would say that it is either a CSS problem, or as I have had a look under the hood (rare for me) the chances are its JQuery (which is not JavaScript nor Java and Java is a different language to JavaScript)

    My suggestion is to find the JQuery part to set the CSS to controlling the image size in the popup.

    It is often better to have a thumbnail image that links to the fill size image, that way the thumbnail will be tiny in file size and it would improve page loading as would processing of all images you want to present online.
    thanks a mill for that. What im trying to do is use the same code for any image that i want pop9-up but those pop-up images need to be displayed all at their original sizes. If i set an image size some newspaper articles are way too big or way too small because within CSS i set jus the ONE size pop-up...

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,543
    Making a generic function is fairly simple.

    Your main operator in this would be the keyword this which is a really useful object because it refers to the object that called it, for example, imagine that you have thumbs of the larger images in a folder ./thumbs and you have in that same directory a folder ./images so that you can organise your folder and provide a simple way of referencing the images

    To give you an example...
    HTML Code:
    <image name="img1" src="./thumbs/mondays_win.jpg" onclick="showImage( this );">
    <image name="img2" src="./thumbs/wednesdays_win.jpg" onclick="showImage( this );">
    <image name="img3" src="./thumbs/saturdays_win.jpg" onclick="showImage( this );">
    and JavaScript
    Code:
    function showImage( obj ){
      var imageName = obj.name, imageSrc = obj.src;
      // big image is in the `images` folder under the same filename but fullsize
      var newSrc = imageSrc.replace("/thumbs/","/images/");
      console.log("The newSrc url = %s",newSrc)
      console.log("The image name is : %s",imageName)
      // here you pass the newSrc to whatever function it is that displays the lightbox image.
    
    }
    You should be able to take that information and use it. The item you are using is a JQuery function and I don't use it, much prefer JavaScript methods.

    If you use an editor like the one I use the most, irfranview, you can use the batch processor feature to turn a complete folder of images in to a set of thumbnail images that are all same size and also process the images in to a sensible size as your images for the image folder.

    Once you have sized the images to the maximum size you want them to display at, you can be assured that your page layout will behave, sometimes images cause more problems than they solve when they are not processed in to manageable sizes.

    If you try the reference example, you can see the output in the browser console (open and closed with F12 and under the `log` tab) with each click the url changes and the image name changes
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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