Announcement

Collapse
No announcement yet.

On Hover, On Click (to show pictures)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JR123
    replied
    Thank you very much! I had a feeling it had to do with the Relative/Absolute/Etc. coding. I'll research how to make it display as I would like it to, and I'll be sure to post a link when it's done. Thanks again, you're all awesome!

    -James

    Leave a comment:


  • NMTEACO
    replied
    Originally posted by JR123 View Post
    Will keep trying, but if anyone has any ideas, I would really appreciate it!
    Thanks!
    James
    Its hard to help without seeing an example of your page, or the results. I would guess it is a result of your CSS. Absolute position will put the top left pixel of the thing in the top left corner of the first div thats surrounding it that has a "relative" position. In your case, since you just want it under the other image, I would suggest taking off absolute position. (unless you want it to "float" over other elements)

    If you are just looking to use images other then thumbnail image in your category page, thats easy... just upload your photos into the products extra pictures. Then you can call them by using [image6], [image7] and so on.

    Take a look at our category page:
    Earl Grey Blends

    You will see that the "product image" is actually a combination of [thumbnail] and [image1] arranged with CSS.

    Also be aware that you only need ONE image, and then you use 3dcarts thumbnail.asp to resize it to whatever you want. (you dont need to have two images, a small and a large.) So the links would look like this:

    For the 20x20 one:
    thumbnail.asp?file=assets/images/blacktea/vintageearlgrey-1.jpg&maxx=20&maxy=20

    and

    for the 150x150 one:
    thumbnail.asp?file=assets/images/blacktea/vintageearlgrey-1.jpg&maxx=150&maxy=150

    Leave a comment:


  • JR123
    replied
    It's working almost perfectly with the one color that I tried a practice with (black)...will do more once I figure this out: I can't seem to get the "display" when it's hovered-over lined up right.

    Here's the code that I've tweaked pretty badly:

    <img onmouseover="document.getElementById('1').style.di splay='block';" onmouseout="document.getElementById('1').style.dis play='none';" src="SMALL-PHOTO-HERE">

    <img id="1" style="position:absolute;display:none;bottom:1px;b ox-shadow:2px 2px 23px 5px rgba(0, 0, 0, 0.8);
    " src="BIGGER-PHOTO-HERE">


    It may be a bit different since I'm not doing this within a product, it's on the Category page. I plan on doing it on the product page(s), but I wanted to get this part going first.

    What I would like is to have the LARGER picture (when hovered over) show just under the small 20px by 20px picture -- maybe 5px or so underneath...

    The way it is now, it's showing in a variety of odd places (depending on how I screw up the code at that time -- you can see from my code above that it's been tweaked a little bit, but is still showing way down when I hover over the small image).

    Maybe it has to do with the "absolute" position portion? Unfortunately I don't know much about this, and was trying to do a variety of "guess and check" before posting back to this thread, but...I'm stumped.

    Will keep trying, but if anyone has any ideas, I would really appreciate it!

    Thanks!
    James

    Leave a comment:


  • Pack Secure
    replied
    When you finish it, please post a link for us to see.

    Leave a comment:


  • JR123
    replied
    Can't wait to try this over the weekend! I REALLY appreciate the advice and you helping "spell out the code" for me! Will let you know how it turns out.

    Thanks again!!!!
    -James

    Leave a comment:


  • NMTEACO
    replied
    Originally posted by piaf View Post

    Looks like you got an extra letter on the word "an". :)
    Thank you!


    Originally posted by JR123 View Post
    Yes, that's almost exactly what I'm looking to do (I would also like a "click" event variable where if you were to click the picture it shows an enlarged picture...since you can't hover on a smartphone...).
    So it does work on a touch screen, because on a smart phone when you "click" its putting the pointer there, so it activates the javascript onMouseOver command. The image will stay up unless you click somewhere else. You could easily show the image on a click, but what I could not figure out is how to hide that image if you clicked on another variable. There is probably a way to do it, but I found its much easier to just hide the thumbnail onmouseout.

    Everything I use is inline javascript. I find this easier to work with, because I don't really know what I'm doing, but there might be a way to make it simpler and allow you to have that click command with more complex javacript.

    ----------------
    Some theory: The issue with the drop image option that I found was that there was no way to show all the drop images at once. I assume you want to be able to see all the swatches when the page loads, then just make the one swatch bigger when you mouseover. So I used the Radio button option.

    This will mess up your radio button for any products that you don't want to work this way... So you will need to use a different template.

    A big issue: There is no way to get or set the particular radio option id until you create it. This is important because we want to pull a specific image for a specific radio button, so how do you do that in a generic way in the template file?

    I make use of the [value] tag, which is actual a unique number assigned to each option across your whole store.

    So your swatch images will need to be uploaded into your image folder as a seperate action. In the code I call the particular image I want with this address:

    Thumbnail:
    Code:
    thumbnail.asp?file=assets/images/optionimages/[itemid]/[value].jpg&maxx=80&maxy=56
    Large Image:
    Code:
    thumbnail.asp?file=assets/images/optionimages/[itemid]/[value].jpg&maxx=420&maxy=293
    So once I create the product with this template, I go in and see what address the thumbnail is pointing to, then I rename my image that, and upload it to the correct file location with FTP.

    RADIO BUTTON CODE:
    PHP Code:
    <!--STARTradio-format-->
    <
    div class="contentbox" style="padding-bottom: 4px; margin-bottom:4px; width:68px; overflow:hidden; display:inline-block; vertical-align:top;">

    <!--
    STARTTHUMBNAIL WITH RADIO-->
    <
    label>
    <
    input style="position:absolute; margin-left:60px; margin-top:40px;" type=radio name="[oname]" value="[value]" onClick="validateValues(document.add,1);updateprice();"  [selected]>
    <
    img onMouseOver="document.getElementById('[value]').style.display='block';" onMouseOut="document.getElementById('[value]').style.display='none';" src="thumbnail.asp?file=assets/images/optionimages/[itemid]/[value].jpg&maxx=80&maxy=56"></label>
    <!--
    ENDTHUMBNAIL WITH RADIO-->
    <
    center>[feature]</center>
    </
    div>

    <!--
    STARTBIG IMAGE-->
    <
    img id="[value]" style="position:absolute;display:none; left:285px; top:75px;box-shadow:3px 3px 23px 5px rgba(0, 0, 0, 0.8);
    src="thumbnail.asp?file=assets/images/optionimages/[itemid]/[value].jpg&maxx=420&maxy=293">
    <!--
    ENDBIG IMAGE-->

    <!--
    ENDradio-format--> 
    As you can see I basically use the [value] tag to make sure that each radio button has a different name (and that name is known) so that I can make reference to it in the code. This way the onMouseOver command does not activate all the thumbnails at once.

    Of course you will need to adjust the style of the big image so that it is in the location that makes since for you.

    Any questions?

    Leave a comment:


  • piaf
    replied
    NMTEACO, as an offtopic reply, your text for that product might need to be fixed:

    From: "Turn your favorite mug into and infuser tea mug!"

    To: "Turn your favorite mug into an infuser tea mug!"

    Looks like you got an extra letter on the word "an". :)

    Leave a comment:


  • JR123
    replied
    Yes, that's almost exactly what I'm looking to do (I would also like a "click" event variable where if you were to click the picture it shows an enlarged picture...since you can't hover on a smartphone...).

    I would greatly appreciate advice on how you accomplished the hover portion!

    Thanks!
    James

    Leave a comment:


  • NMTEACO
    replied
    Hi,

    Take a look at this product page:

    Forlife Brew In Mug Infuser

    If that is what your trying to do, then I can tell you how I did it!

    Leave a comment:


  • JR123
    started a topic On Hover, On Click (to show pictures)

    On Hover, On Click (to show pictures)

    Hi there,

    I want to show very small color swatches (like 15px X 15px or something along those lines) and have it to where those on a desktop computer can "hover" for a larger picture of the swatch (like 100px X 100px), and as a back-up for those on a smart phone they can "click" the small swatch for the larger swatch picture.

    Is there a way to do this that isn't incredibly complicated? Preferably by using HTML or javascript, or something where I can put the code directly within the Category template?

    Thanks in advance!
    James
Working...
X