image already big when page opens

140 Views Asked by At

I really have been looking through formum but maybe I was not able to search for the right thing. I just want one of the images on page already opened after the page is loaded. I would like use it to generate special hints in webpage, that can be closed. I think it would be nice to use highslide and not use another script on page. Are there any hints ? Thank you

1

There are 1 best solutions below

1
On BEST ANSWER

Here's the simplest way to open an image on the page as soon as the page is loaded. The thumbnail and Highslide markup (the "a href" lines) don't even have to be on the page, though my example shows them - the event listener will work even without them:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Highslide JS</title>
<script type="text/javascript" src="highslide-full.min.js"></script>
<link rel="stylesheet" href="highslide.css">
<script type="text/javascript">
    hs.graphicsDir = 'graphics/';
    hs.outlineType = 'rounded-white';
    hs.addEventListener(window, "load", function() {
        hs.expand(null, {src: 'full-image.jpg'});
    });
</script>
</head>
<body>
<div>
<a href="full-image.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="120" width="107">
</a>
<div class="highslide-caption">
    This caption can be styled using CSS.
</div>
</div>
</body>
</html>

Be aware that you must use highslide-full.js or highslide-full.min.js for this to work.