SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Enlarge image help please

    Hi all

    Can anyone help me with this problem I have.
    Please click this link
    http://www.locksandfittings.co.uk/products/view/314
    Have a look at the product image when you rollover the product image a larger div pops up with a large view of the product image. Does anyone know how to make it only come up when you click on the image the click again to make the div disapear. I'm guessing this probably cannot be done in CSS and I will need to use java script could someone please help and if possible send me the code to do this.

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Here are two ways to click for a larger image.

    The first way is to apply a different class to the div

    Code javascript:
    function embigger() {
        var el = document.getElementById('embiggen');
        if (el.className === 'embiggened') {
            el.className = '';
        } else {
            el.className = 'embiggened';
        }
    }
    document.getElementById('embiggen').onclick = embigger;

    This allows the class rule to control what happens to that element.

    The other way is to have two elements, and to activate the other one when you click on it.

    Code javascript:
    function toggleEmbiggenedness() {
        var el = document.getElementById('embiggened');
        if (el.style.display = 'none') {
            el.style.display = '';
        } else {
            el.style.display = 'none';
        }
    }
    document.getElementById('embiggerer').onclick = toggleEmbiggenedness;
    document.getElementById('embiggened').onclick = toggleEmbiggenedness;
    document.getElementById('embiggened').onclick(); // hide on page load

    So there's the two general ways of achieving it.
    Last edited by paul_wilkins; May 13, 2008 at 02:44.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    I am a little new at javascript could you just let me know where I need to put that code and how to link it to the div I want to expand.

    Thanks
    Ross

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    The code samples above have not been specifically designed to work in with your page code. They are merely samples of the types of techniques that may be employed for onclick events to affect parts of the page.

    While the code samples may have parts that are quite heavily inspired from Jebediah Springfield, they are perfectly cromulent examples of the techniques that may be applied.

    When it comes to editing your own page, you are in the best place to understand how you have programmed your page, so you should try your hand at making the changes yourself. We'll be here to help you through any troubles you have.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not the cleverest at javascript and really don't know where to start.

    I have added this code to the head of my page
    function toggleEmbiggenedness() {
    var el = document.getElementById('embiggened');
    if (el.style.display = 'none') {
    el.style.display = '';
    } else {
    el.style.display = 'none';
    }

    Then created a style in my css called #embiggened with all the styles from the div that currently appears on hover.

    I have put this on the current div of the small image that will be clicked on <div onClick="embigger();" id="product-image">.

    I am getting 2 error when i do this saying clientx=0 clienty=0

    Do you know what I am missing here.

    Thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    The good news is that because you have prototype on your page, the function becomes a lot simpler.

    Code javascript:
    function embigger() {
        $('embiggen').toggleClassName('embiggened');
    }
    Event.observe(window, 'load', function() {
        // attach events
        Event.observe('embiggerer', 'click', embigger);
        Event.observe('embiggen', 'click', embigger);
        // activate event to hide elements
        $('embiggen').onclick();
    });

    The onclick doesn't belong on the div. That task should be done from within javascript, so that later on when you want to change the script for your product pages, you don't have trouble with scripts within your page code.

    Now in your case, you'll be wanting code that more closely matches up with your page elements.

    Code javascript:
    function embigger() {
        $('#product-image img.large').toggleClassName('embiggened');
        $('#product-image span.dimensions').toggleClassName('embiggened');
    }
    Event.observe(window, 'load', function() {
        Event.observe('product-image', 'click', embigger);
        $('embiggen').onclick();
    }

    Then it should just be a case of removing the hover styles from the old technique and applying the embiggened styles, where the display is set to none to hide them at first, then set to inherit when the embiggened class is applied when clicking.
    Last edited by paul_wilkins; May 13, 2008 at 12:55.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I am a little confused here because I did not create the javascript prototype file my colleague did who his currently away on holiday.

    So apologies for being a bit of a dumbass.
    Do I need to but both pieces of code into my php file in the head or do I just need one or should they be in the prototype.js file. If so where should they go in the file and there are a list of handlers at the bottom on the prototype file do I need to create one of those??

  8. #8
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried just putting
    function embigger() {
    $('#product-image img.large').toggleClassName('embiggened');
    $('#product-image span.dimensions').toggleClassName('embiggened');
    }
    Event.observe(window, 'load', function() {
    Event.observe('product-image', 'click', embigger);
    $('embiggen').onclick();

    In the head but I am getting a javascript error saying the following:

    missing } after function body
    [Break on this error] \n
    LINE 31

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a missing } at the very end of that block you posted. Add it.

  10. #10
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I added the } but still didn't do the job. In the end I gave up and found some code on the net that sorted it out a lot simpler.

    Thanks for your help anyway.

    Here is the code I used
    <script type="text/javascript">
    // preset the variable
    show = false;

    function showhide(){
    if(show){
    document.getElementById('large-image-container').style.display='none'
    show = false
    }else{
    document.getElementById('large-image-container').style.display='block'
    show = true
    }
    }
    </script>

    I then just set all the divs inside large-image-container to Display:inherit.

    Thanks for your help anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •