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

Report · Jun 04, 2013

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;

Report · Jun 04, 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 & Moderator

Report · Jun 09, 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;

Report · Jun 09, 2013

Your code didn't come through to the web forum. We need to see the live test page. Can you upload it to your server and post the URL here?

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 09, 2013

Hi Nancy, I have tried to copy the code in again. My test page in Dreamweaver is just linked to files in may local drive so it is not live yet. So i am not sure of the best way to enable you to view code ? Sorry the code is a bit long winded at the moment hope you can see this ! Kind regards, Matt.

Craftime - About

-->

Report · Jun 10, 2013

Are you using email to reply? Won't work. You need to come to the web forum and post your code in a reply here.

Report · Jun 10, 2013

Below is a sample gallery made with with Fancybox2.

View source in your browser to see the code.

http://alt-web.com/Fancybox2/fancyapps-fancyBox-0ffc358/demo/demo.html

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 10, 2013

Nancy,

Thanks for your help I have viewed the sample galleries and I still cant work out the problem.

I am going to upload the test site using business catalyst then I will share the live page URL with you once I work out how to do it!

Kind regards, Matt.

Report · Jun 12, 2013

hello

not trying to hijack the thread but needed some clarification

your very short tutorial

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

was really informative. Just have a couple quick questions:

you state:

"the core code library which you ref in your <head> tags,"

the below code just has to be declared ONCE at the beging in your head section, correct?

</script>

then any number of jquery plugin scripts can be placed in ANY order in your head section following the above code, correct?

"the function code inside <script> tags to invoke the plug-in."

so then in the body, does the functions code have to come RIGHT AFTER the place it is being used?

example

<body>

<div class="slideshow1"

...

</div>

<script type="text/javascript">

...

</script>

.

<div class="slideshow2"

...

</div>

<script type="text/javascript">

...

</script>

</body>

or can you take all the function codes and paste them in the end outside of the respective divs that are using the code?

ie does the position of the code matter?\

thanks guys

Nancy O. wrote:
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.h tml
Nancy O.

Report · Jun 12, 2013

you state:
"the core code library which you ref in your <head> tags,"
the below code just has to be declared ONCE at the beging in your head section, correct?

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

Right.

then any number of jquery plugin scripts can be placed in ANY order in your head section following the above code, correct?

Right. But it helps to load the most important ones first. For a slideshow, it doesn't really matter where you put it as long as it's in the <head> tags.

"the function code inside <script> tags to invoke the plug-in."
so then in the body, does the functions code have to come RIGHT AFTER the place it is being used?

No. You'll get leaner code if you combine all your functions into one set of <script> tags, and put them all at the end of your document.

<script type="text/javascript">

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

</body>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 12, 2013

thanks for the reply

just to further clarify

Nancy O. wrote:
then any number of jquery plugin scripts can be placed in ANY order in your head section following the above code, correct?
Right. But it helps to load the most important ones first. For a slideshow, it doesn't really matter where you put it as long as it's in the <head> tags.
by important plugins what do you mean? is a gallery plugin more important than a simple slideshow plugin or do you rank them according to which one reuqires more lines of code?
so then in the body, does the functions code have to come RIGHT AFTER the place it is being used?
No. You'll get leaner code if you combine all your functions into one set of <script> tags, and put them all at the end of your document.

<script type="text/javascript">
     $(document).ready(function() {
      $('.slideshow1, .slideshow2').fancybox();
      });
</script>
</body>
the above example assumes that slideshow1 and slideshow2 use the same script correct?
what if the function codes are for different plugins? is it better to list them all near the end of your <body> section:
...


<script type="text/javascript">
    ...
</script>

<script type="text/javascript">
...
</script>


<script type="text/javascript">
   ...
</script>

<script type="text/javascript">
   ...
</script>

</body>

Report · Jun 12, 2013

Think in terms of page loading priorities. Let's say for example you want to pre-load some images and then load scripts for menus and then scripts for slideshows. Ideally, you should list the helper scripts in the order needed. Pre-loader on top followed by menu and then slideshows. Make sense?

N

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 12, 2013

what if the function codes are for different plugins? is it better to list them all near the end of your <body> section:

Yes. But there are no hard and fast rules about this. It depends on the plugin and the developer's documentation for it.

More & more plugins are coming out now that use data attributes inside the DIV tag to invoke the plugin's features (limited to HTML5 docs). But if you're using an older plugin or an older doc type, you can combine function code for different plugins inside one set of <script> tags.

Web development is part black art, covert logic & gut instinct. Do whatever works for YOU.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 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.

Report · Jun 14, 2013

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.

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

Then invoke Fancybox inside <script> tags.

$(document).ready(function() {

$(".fancybox").fancybox()

});

</script>

It really is that simple.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 17, 2013

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.

Report · Jun 17, 2013

Add class="fancybox" to your anchors.

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

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 18, 2013

Nancy,

Thanks very much for your help works fine.

Matt.

Report · Jun 04, 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.

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

1 Correct answer

Photos