Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
Like Tree3Likes

Thread: Englarge photo upon click or hover

  1. #1
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041

    Englarge photo upon click or hover

    I am having trouble putting the code around making a photo enlarge when I hover or click on it.

    I am new to this so my code may be very messy but this is what I have.


    <img style="padding: 1px; border: thin solid black;" src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" alt="" width="261" height="174" /><img style="padding: 1px; border: thin solid black;" src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0087.jpg" alt="" width="261" height="174" /><img style="padding: 1px; border: thin solid black;" src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/St-Johns-5.jpg" alt="" width="261" height="174" />
    <a href="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" target="_blank"> </a>

    Could someone help please.

    If you need more info let me know.

    Thanks

    Sarah

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041
    This is the link that this refers to. This website is not yet live

    Educational | Architectural Windows Ltd

  4. #3
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041
    Is there anyone able to help please. We go live Friday and I wanted this to be a function when we do.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    That all depends on what you mean by enlarge. Are you talking about a modal box that takes up most of the screen, or just have it expand a little?

    If you're wanting the modal, fancybox is a good one.
    Sarah Byrne likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041
    Quote Originally Posted by Ronald Roe View Post
    That all depends on what you mean by enlarge. Are you talking about a modal box that takes up most of the screen, or just have it expand a little?

    If you're wanting the modal, fancybox is a good one.
    I just want it so that If you click on it or preferably hover over the picture that it pops up with a larger image. Not so that It fits the whole page but so that its 4 times the original size. Not sure what a fancybox is

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Fancybox is the name of good modal window plugin for jQuery. It might do what you're wanting.

    If not, try adding this to your CSS file:

    Code:
    #main img:hover{
      width:200%;
      height:200%;
    }
    Sarah Byrne likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041
    Quote Originally Posted by Ronald Roe View Post
    Fancybox is the name of good modal window plugin for jQuery. It might do what you're wanting.

    If not, try adding this to your CSS file:

    Code:
    #main img:hover{
      width:200%;
      height:200%;
    }


    Where do I add that? Sorry I had something similar already but had no idea how to add it to my html.

    I had

    <a class="thumbnail" href="introduction.php">
    < img src="http://www.webdesignforums.net/forum/images/50x50.jpg" alt="Imagename" width="50px" height="50px" border="0"><span><img src="images500x500.jpg" alt="Imagename"><br> image&nbsp;name</span></a>

    Thanks
    Last edited by Sarah Byrne; Mar 02nd, 2015 at 02:47 AM.

  9. #8
    Junior Member
    Join Date
    Feb 2015
    Posts
    1
    Member #
    46432
    Liked
    1 times
    I had a blog, (elrincond.com) look at the top left... There's a little img. Tell me if is something like that. I'm not a programmer, just a web fan.
    Usando Tapatalk
    Sarah Byrne likes this.

  10. #9
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041
    Quote Originally Posted by lukatak View Post
    I had a blog, (elrincond.com) look at the top left... There's a little img. Tell me if is something like that. I'm not a programmer, just a web fan.
    Usando Tapatalk
    Something like that. More like this,

    Enlarge Image On Hover CSS3 Demos | Grains of Sand - CSS & HTML5 Demos & Templates

    The code is there I just don't know where to put it around mine to make it work.

  11. #10
    Junior Member
    Join Date
    Dec 2014
    Posts
    12
    Member #
    41041
    I tried it there way and have just ended up with a little picture and a big picture. Getting to the stage where I want to bang my head against a wall as I think this may be more useful!


    <ul class="enlarge"><li><img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="261px" height="174px" alt="St John's"/><span><img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg"/><br/>St John’s, Baldock</span></li>
    </ul>


    St Johns..jpg


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com