View original (French)

Create an image zoom

Solved
alea31 Posted messages 4 Status Member -  
 paulineRipauste -
Hello,

I am an illustrator and I am currently creating a website to showcase my watercolors.
I want to create pages consisting of small images of my creations on the left and a zoom accessible by clicking on the small images on the right. I found a Flash site that uses this process: http://www.kimberlygrant.com/index2.php
Is it possible to do this in Dreamweaver with HTML?

Thank you very much

Aléa
Configuration: Windows XP Internet Explorer 7.0

6 answers

Answer 1 / 6
Linux67 Posted messages 307 Status Member 123
 
Good evening,

I don’t know if this piece of code is what you’re looking for, I used it to display thumbnail images at their full size in a new window. 

 <script> <!-- script created by the webmaster of: www.creation-de-site.net --> <!-- you will find javascripts, images, tutorials, and free resources there. --> <!-- This script displays a thumbnail image at its actual size in a new window --> function open_window(your_page) { var popup_height=800; var H = (screen.height - popup_height) / 2; var popup_width=800; var L = (screen.width - popup_width) / 2; pop_up = window.open(your_page,"Popup","status=yes,scrollbars=yes,resizable=no,height="+popup_height+",width="+popup_width+",top="+H+",left="+L); } </script>


The code should be placed in the header of the HTML file, between the <head> and </head> tags, and the browser must accept pop-ups for the image to enlarge when clicked.

Then you have between the <body> and </body> tags code resembling this.
Here it looks for images and displays them as thumbnails, while indicating that when clicked, it should use the pop-up opening for full-size display. 

<img src="..\images\image1.jpg" width="200px" onClick="open_window('../images/image1.jpg');"> <img src="..\images\image2.jpg" width="200px" onClick="open_window('../images/image2.jpg');"> <img src="..\images\image3.jpg" width="200px" onClick="open_window('../images/image3.jpg');"> <img src="..\images\image4.jpg" width="200px" onClick="open_window('../images/image4.jpg');">


You will need to add after each thumbnail image the line 
onClick="open_window('../images/image4.jpg')

so that the enlargement can work.

It's a bit clunky at first glance, but I hope it will be useful to you.

Have a good evening.
5
alea31 Posted messages 4 Status Member
 
Thank you for your help, but I want to display images in
thumbnail at their actual size in a single window. Do you know how
to proceed? Have a good evening, Aléa.
0
paulineRipauste
 
Hello,

I also need your help, I have a website www.ripauste.fr and I would like to add a zoom feature. I have the code:

<style type="text/css">
#jqZoom_vignettes{
clear: both;
}
#jqZoom_vignettes img{
width: 75px;
}
</style>

<script type='text/javascript' src='../site/jqzoom/js/jquery-1.6.js'></script>
<script type='text/javascript' src='../site/jqzoom/js/jquery.jqzoom-core.js'></script>
<link rel="stylesheet" type="text/css" href="../site/jqzoom/css/jquery.jqzoom.css">
<script type="text/javascript">
$(document).ready(function(){
$('.jqZoom_zoom').jqzoom();
});
</script>

<a href="*UrlZoom*" class="jqZoom_zoom" title="*NomProduitBrut*" rel="jqZoom_gallerie">
<img src="*UrlIllustration*" title="*NomProduitBrut*">
</a>

<div id="jqZoom_vignettes">
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration*',largeimage: '*UrlZoom*'}"><img src="*UrlIllustration*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration2*',largeimage: '*UrlZoom2*'}"> <img src="*UrlIllustration2*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration3*',largeimage: '*UrlZoom3*'}"> <img src="*UrlIllustration3*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration4*',largeimage: '*UrlZoom4*'}"> <img src="*UrlIllustration4*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration5*',largeimage: '*UrlZoom5*'}"> <img src="*UrlIllustration5*"></a>
</div>

And I want to insert it into my product sheets... but it’s not working... It adds photos below the zoomable image....
Can someone help me?

Thanks in advance!

Pauline
0
Answer 2 / 6
Dalida Posted messages 7114 Registration date   Status Contributor Last intervention   923
 
Hi,

in HTML, you could have small images (thumbnails of the actual images or details of the actual images) on the left that display the full image on the right when hovered over by the cursor.
This can be done with Dreamweaver or another HTML editor.
For this, you need to use stylesheets (CSS).

But to manage clicks without reloading the page, you will need to use JavaScript.
By the way, it will be faster to load than Flash.

-- 
There are surely pandas to depend on nothing And why not questions that last until tomorrow
2
alea31 Posted messages 4 Status Member
 
Thank you very much, it's exactly what I want to achieve, but I don't
know where to start! Could you help me? Thank you very much. Have a
good evening.
0
Answer 3 / 6
Aléa
 
Thank you for your kindness, I am looking forward to your code!
Have a great day, Aléa
2
Answer 4 / 6
Linux67 Posted messages 307 Status Member 123
 
I am currently at my workplace (what a big word ^_^), I will check this evening in the pages I made in class to recover this piece of code, I think I used it as well.

Have a nice day.
1
Answer 5 / 6
Linux67 Posted messages 307 Status Member 123
 
I have found the code used to create a sort of image gallery, but it is not practical to use; it needs to be edited each time an image is added to create the thumbnail and the full-sized image.
I will try to automate it this week; I haven't had much time to myself tonight to really work on it thoroughly.

Have a good evening.
1
Answer 6 / 6
Aléa
 
Thank you all for your help, I found the solution on the site
https://www.lecodejava.com/

Have a good day, Aléa
1
fleursbleus007
 
Hello,

Thank you for this link.
0