Skip to main content
M
MS1971
Participating Frequently
June 4, 2013
Answered

Advice for HTML and CSS code to enlarge an image when clicked ?

  • June 4, 2013
  • 2 replies
  • 25813 views

Hi,

When clicking on a thumb image I would like users to able to view an enlarged version in the same webpage and then click on close to go back to the thumb image.

This is not in a gallery it is a for sale page which contains 3 images.

I am new to this - learning all the time any help greatly appreciated !!

Kind regards, Matt,

ps code used so far;

<img src="images/gallery_images/thumbs/120px-Glass_1.jpg" alt="Glass image 1" width="150"/>

This topic has been closed for replies.
Correct answer Nancy OShea

Hi Nancy,

Thanks very much for help.

I have followed your advice above copied the links into the head tags of the dwt file then put links to a thumb and large image and inserted fancybox code inside script tags within the body of the page. However when I view the page and click on thumb image all I can see is the basic enlarged image.

See link to a test page I have created below;

http://craftime-bs6.businesscatalyst.com/For%20Sale.html

Can you spot this issue ?

Kind regards, Matt.


Add class="fancybox" to your anchors.

<!--begin slides-->

<a class="fancybox" href="images/gallery_images/large_images/700px-Glass_1.jpg"><img src="images/gallery_images/thumbs/120px-Glass_1.jpg" alt="description">

<!--end slides-->


<!--INVOKE FANCYBOX WITH THIS CODE-->

<script>

$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>

Nancy O.


2 replies

C_F_McBlob
C_F_McBlob
Inspiring
June 4, 2013

Use Fancybox

You can thumbnail a web page or other iframe content and it will open in a "pop up". There's an example of it on their page.

Nancy OShea
Nancy OShea
Braniac
June 4, 2013

Try jQuery Fancybox

http://fancybox.net/

If you're new to using jQuery plugins, see this primer:

http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html

Nancy O.

Nancy O'Shea— Product User, Community Expert &amp; Moderator
M
MS1971Author
Participating Frequently
June 9, 2013

Hi,   Thanks very much for your advice.  I have downloaded fancybox. I am  struggling to execute it. I am just trying to view a single image and was expecting to be able to see thick white border and buttons etc.   I have inserted the following code in the header of my web template and the body of the webpage. Any advice much appreciated.  Matt.     Code in head;        

Craftime - About

  

  

Code in Body;   

Nancy OShea
Nancy OShea
Braniac
June 14, 2013

Hi Nancy,

Thanks for your help.

Link to my test site: http://craftime-bs6.businesscatalyst.com

I have now started to create a test site using business catalyst with Dreamweaver as I would like to make use of some of the templates and javascript for example the slider gallery. Its still in its very early stages! I still like the look of the fancybox examples you sent me and would like to try and use it at the moment to enlarge single thumbnail images in the test "For Sale" page.

I have downloaded fancyapps-fancybox-offc358. I was going to copy the following files into the root of my local folder or maybe I should copy the complete fancybox download ?

jquery-1.9.0.min.js

jquery.fancybox.pack.js

jquery.fancybox.css

I was going to insert links to the files above in the header of the DWT file. I was then going to insert links to small and large images and appropriate jquery function code within a <script> tag in the editable region {tag_pagecontent} which is still in the header of the For Sale page.

Do you think this will work ?

kind regards, Matt.


Depending on many bells & whistles you need from Fancybox2, you probably don't need all the plugin scripts.  If all you want is a basic viewer, you can copy and paste links from the content distribution networks that host these scripts into your <head> tags. 

<!--LATEST JQUERY CORE LIBRARY-->

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!--FANCYBOX plugins-->

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">

<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>

Add some thumbnail images and links to full-size images inside your <body> tags:

Then invoke Fancybox inside <script> tags.

<!--INVOKE FANCYBOX-->

<script>

    $(document).ready(function() {

        $(".fancybox").fancybox()

});

</script>

It really is that simple.

Nancy O.

Nancy O'Shea— Product User, Community Expert &amp; Moderator
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices