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.

Results 1 to 8 of 8
  1. #1
    Junior Member DaMighty Optiq's Avatar
    Join Date
    Nov 2011
    Location
    West Allis, Wisconsin
    Posts
    10
    Member #
    29989
    I am building my store and can't find a script that suits what I'm trying to do. On my t-shirt pages I want the customer to be able to hold the mouse over the picture of the shirt for a larger picture to pop up showing all the specs and color options to help save time on clicking back and forth for the info or making the page too bulky with info by including it all right there at the same time. I figured it could be a simple script like doing a rollover for a button... I just haven't built web pages in a while and don't understand the language well enough anymore to be able to rationalize what to adjust in the code or how... If it helps any I'm basing everything off of designing the page in Photoshop and using the slicer tool to make the hot spots then saving it for the web and working inside the HTML that comes from that in note pad. I appreciate any help you guys can offer!!

  2.  

  3. #2
    Junior Member DaMighty Optiq's Avatar
    Join Date
    Nov 2011
    Location
    West Allis, Wisconsin
    Posts
    10
    Member #
    29989
    Ok I made a little head way..... I got this script

    <a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a>

    I got it from http://orangoo.com/labs/GreyBox/

    what I did was worked it around the image I want to act as the link but
    instead of opening in a floating box that can be closed it sends the browser
    into a new page... leaving the previous one.. I don't want it to do that..
    the way I set it up is


    <a href="PATH TO THE PIC I WANT TO SHOW UP" title="NAME OF KIND OF SHIRT" rel="gb_page_fs[]">INSTEAD OF WORDS I HAVE THE IMG SRC FOR THE PIC ON THE PAGE</a>

    .... what am I missing here?... how do I get it to open in a floating grey
    window like the links do on their page rather than in the browser?

  4. #3
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    rel="gb_page_fs[]" will give you a page - it says so - gb=grey box, page=newpage, fs=fullsize

    There are other syntaxes you could use - I'm pretty sure one of these will do what you want.
    See: http://orangoo.com/labs/greybox/normal_usage.html

    Or you could use a jQuery lightbox, such as this one:
    http://www.cabel.name/2008/02/fancyzoom-10.html
    DaMighty Optiq likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #4
    Junior Member DaMighty Optiq's Avatar
    Join Date
    Nov 2011
    Location
    West Allis, Wisconsin
    Posts
    10
    Member #
    29989
    ok I"m lost... because the script isn't opening a new window.... let me show the coding and how I"m trying to apply it...

    <tr>
    <td colspan="2">
    <img src="images/Popup_05.jpg" width="173" height="65" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img src="images/Popup_06.jpg" width="5" height="1624" alt="">
    </td>
    <td>

    <a href="images/Tanktop.jpg" title="Tank Tops" rel="gb_image_[]">
    <img src="images/Tank.jpg" width="168" height="236" alt="">
    </a>

    </td>
    </tr>

    when I do this the image loads in the same window and I have to click back to go to the previous page... what am I doing wrong that makes it not open in a grey box?... also... where's the info for the close button that's suppose to be on the grey box?..

  6. #5
    Junior Member DaMighty Optiq's Avatar
    Join Date
    Nov 2011
    Location
    West Allis, Wisconsin
    Posts
    10
    Member #
    29989
    anybody?

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Try Fancybox. I don't think it fires on mouseover, but it will load more than just images, so you can have the div containing your selector pop up.
    DaMighty Optiq likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Member
    Join Date
    Nov 2011
    Posts
    50
    Member #
    30017
    Liked
    9 times
    Try this, should work.

    CSS:
    Code:
    body {
    background-color: #333;
    }
    div.rollover {
    height: 200px;
    width: 200px;
    border-radius: 3px;
    box-shadow: 1px 3px 1px rgba(0, 0, 0, .20);
    position: absolute;
    top: 100px;
    left: 300px;
    background-color: WhiteSmoke;
    }
    .rollover image {
      width: 200px;
      height: 200px;
    }
    .moreinfo {
    position: absolute;
    top: 100px;
    left: 510px;
    height: 250px;
    width: 250px;
    box-shadow: 1px 3px 1px rgba(0, 0, 0, .20);
    border-radius-bottom-left: 3px;
    background-color: WhiteSmoke;
    }
    HTML Code
    HTML Code:
    <div class="rollover"><img src="image.png" alt="image" /></div>
    <div class="moreinfo">
    <h4>Shirt Name</h4>
    <p>TEST TEST</p>
    <p>BLAH BLAH BLAH</p>
    </div><!-- end moreinfo -->
    jQuery Code
    Code:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.moreinfo').hide();
    });
    $('.rollover').mouseover(function(){
    //var x = e.pageX;
    //var y = e.pageY;
    //$('.moreinfo').css('top', y); //You might not need these lines as they would just move it around to the cursor
    //$('.moreinfo').css('left', x);  //And this also, not sure if it works 100% though.
    $('.moreinfo').show(300);
    });
    $('.rollover').mouseleave(function(){
    $('.moreinfo').hide();
    });
    </script>
    Try this, and tell me if anything doesn't work and ill edit it up. If the e.PageX/e.PageY doesn't work, you will have to set a particular value inside of the CSS for the top and left value. All im doing here is that no matter where they mouse over the image, it will place the info tab, at the bottom right of the cursor. So if the cursor is at X - 250, Y - 255, the top left corner of the box will be at top: 250px, left: 255px. And it _should_ move around with the cursor. Just try it out for me and tell if it works or not. Glad to help if it doesn't and good luck if it does.

    Alright so this is the code, I haven't had much time to debug it and make it work perfect, I will when i get a chance though. If you wish to look it over I have it commented up so that you can figure out whats going on and edit yourself.

    JavaScript/jQuery
    Code:
    <script type="text/javascript">
    //Hides the moreinfo div upon page load.
    $(document).ready(function(){
    $('.moreinfo').hide();
    });
    //grabs the current position of the cursor when its over .rollover
    $(document).bind('mousemove',function(e){
    $('.rollover').mouseover(function(){
                  //puts the x/y co-ords into variables
    var x = e.pageX;
    var y = e.pageY;
                  //debug info for the co-ords
    $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
                  //okay so this sets the location of .moreinfo to an absolute position, based upon where the mouse is, this isn't necessary, and just added, but you can use it if you would like
    $('.moreinfo').css('top', y+"px"); //You might not need these lines as they would just move it around to the cursor
    $('.moreinfo').css('left', x+"px");  //And this also, not sure if it works 100% though.
                  //badda-bing-badda-boom starts the action
    $('.moreinfo').show(300);
    });
    });
    //Stops the action
    $('.rollover').mouseleave(function(){
    $('.moreinfo').hide();
    });
    </script>
    The whole shabang so that you can understand where it goes.
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <title></title>
    <style>
    body {
    background-color: #333;
    }
    div.rollover {
    height: 200px;
    width: 200px;
    border-radius: 3px;
    box-shadow: 1px 3px 1px rgba(0, 0, 0, .20);
    margin-top: 100px;
    margin-left: 300px;
    background-color: WhiteSmoke;
    }
    .rollover image {
      width: 200px;
      height: 200px;
    }
    div.triangle {
    
    }
    .moreinfo {
    position: absolute;
    top: 100px;
    left: 520px;
    height: 250px;
    width: 250px;
    box-shadow: 1px 3px 1px rgba(0, 0, 0, .20);
    border-radius-bottom-left: 3px;
    background-color: WhiteSmoke;
    }
    div#log {
    color: WhiteSmoke;
    }
    </style>
    </head>
    <body>
    <div id="log"></div>
    <div class="rollover"><img src="image.png" alt="image" /></div>
    <div class="moreinfo">
    <div class="triangle"></div>
    <h4>Shirt Name</h4>
    <p>TEST TEST</p>
    <p>BLAH BLAH BLAH</p>
    </div><!-- end moreinfo -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.moreinfo').hide();
    });
    $(document).bind('mousemove',function(e){
    $('.rollover').mouseover(function(){
    var x = e.pageX;  //you can edit out this
    var y = e.pageY;  // this
    $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); // this
    $('.moreinfo').css('top', x+"px"); //You might not need these lines as they would just move it around to the cursor. these
    $('.moreinfo').css('left', y+"px");  //And this also, not sure if it works 100% though. and this
    $('.moreinfo').show(300);
    });
    });
    $('.rollover').mouseleave(function(){
    $('.moreinfo').hide();
    });
    </script>
    </body>
    </html>
    Alright I did some more testing, and i had the x/y co-ords mixed up, also if you want to close the side part, i would suggest this, also if you want it to stay up as long as the user is using the info there, or you are having them add to cart from there this would be your best bet.

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    $('.moreinfo').hide();
    });
    $(document).bind('mousemove',function(e){
    var x = e.pageX;
    var y = e.pageY;
    $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
    $('.rollover').mouseover(function(){
    $('.moreinfo').css('top', y+"px"); //You might not need these lines as they would just move it around to the cursor
    $('.moreinfo').css('left', x+"px");  //And this also, not sure if it works 100% though.
    $('.moreinfo').show(300);
    });
    });
    $('.moreinfo').mouseleave(function(){
    $('.moreinfo').hide();
    });
    </script>
    Created a mock up of what your asking: Demo

    Is this what your asking for?
    DaMighty Optiq likes this.

  9. #8
    Junior Member DaMighty Optiq's Avatar
    Join Date
    Nov 2011
    Location
    West Allis, Wisconsin
    Posts
    10
    Member #
    29989
    MAFIYA THANKS!!!!!.... I think this is EXACTLY what I need... I figured out what I was talking about before... but discovered that wouldn't work... I'm using an APP called IWIPA to build the store into facebook. It has a few different boxes for you to select but I"m using the "media box" to store the HTML coding and photobucket for the pics... so I don't have a domain to save the java files to... the demo you put up is what I was originally looking for... just a rollover of a different image.. so if this doesn't take java tat would be PERFECT... the only thing is in your demo the pic doesn't go away when you take the mouse off the picture.. which I'm sure is just a matter of coding...so if there's a way to do this without me having to have a domain to save the java files or a way to do it with just html that would be perfect....


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 07:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com