Mini Pop Up Boxes for Larger Images & Description Details??? : )

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I've visited many sites where you could view an item in a bigger size and see it's description all without leaving your current page. A small box pops up on link click or mouseover that shows the larger image and it's descriptions. Is there any code or a way to create boxes that will let a customer view an item larger that I can use on Yola???
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
  • unsure

Posted 9 years ago

  • 1
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Well I've found the solution and here it is...
For anyone who might need it... http://www.freewebmasterhelp.com/tool...

However is there anyway to make the pop-up window appear closer to the item, instead of it popping up all the way at the top and How do you add a description to it, any help would be great, Thanks!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi A,

There are better ways to achieve this than the example you give above.

I have a couple of methods on 2 of my sites - check them out see if 1 would work for you.

http://eclipsebar.info/photo (click to pop up's)

http://www.hexham.info/places (mouseover pop ups)

Let me know if either of the methods is what your looking for.

Lee.
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Hi Lee, the one at hexham.info is perfect! Just what I need... : )
Photo of Felipe

Felipe

  • 58 Posts
  • 0 Reply Likes
Hello UK Duke. I do not see the mouseover pop ups. Did you change anything ?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi A,

This is the script that creates that effect http://www.dynamicdrive.com/dynamicin...

If you need any help setting it up just ask. It looks like a scary peice of code but just read it down like a book - they explain how and where to edit it.

The example used is a text link but you can add an image link instead, or a link which goes no where "#".

Like i say if you need any help just ask back on this thread.

Lee.
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Ok yeah I actually found this script a couple of days ago, and it gave me problems, so I quit with it... SO YEAH I MAY NEED HELP!!! : ) Thanks Lee, I'll get back to you about it asap...
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
is that really your house? LOL
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
A -

Tell me exactly what you want to achieve and i will be able to get it working for you.

If you want to make a smaller image into a larger pop up - first upload all the images (small and large) to your filemanager.

Tell me the site URL & the size of the larger image & the filenames.

- We'll get it working. Lee.
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
I totally got it to work!!! lol Only thing is I don't know how to change the size of the enlarged image, how do you do that? If only I could have got this to work 2 days ago!!! : )
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
I'm running into one more problem as well, although some images don't need a totally new page and only need the tooltip some still need to be able to be clicked to show them on a new page... However the tooltip link won't allow me to have another link that the viewer can click, is there a way to have the tooltip and the clickable link, or does the clickable link have to be far away from the tooltip link???
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
The image will show at what ever size it is - you can resize images using Picnik.com - there is a little peice in the code which allows you to set the border of the tootlip.

The best thing to do is to have all the images the same size (on 1 screen anyway) - If you og to Picnik.com and set all the images to be equal it will look better.

As for the second part of your comments - Do you mena like on my site where the small image is clicked and it goes to another page?

You could just set the link of the small image to go to the URL of the image (i.e. it would show it full screen) remeber image urls are youriste.com/ resources/ imagename.jpg
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
Yeah for the link, that's exactly how I had it... But it doesn't want to read both links, when I rollover it I see the enlarged image, but when I click my old link to go to the items page, it does nothing but refresh or go back to the top of the page I was on. It won't read both links, I think they have to be further apart to work, because linking 1 picture twice is not allowed... IDK! I'll work out the kinks later though, Thanks for all the help! Thanks so much Lee...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Is the link text or an image?

Either way the tooltip just works on links so if the link is correct it will when clciked go where the link goes and also show the tooltip - for example here http://hexham.info/swallowship (the tree image at the bottom) i link that image to the photographers business card.

<!-- I use this code:

<a href="http://www.hexham.info/corkysphotos" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">
<img src="resources/tree.jpg" alt="SWALLOWSHIP WOODS HEXHAM" border="0"></a>

Maybe it makes more sense by seeing the code i use. Hope so.

Good luck - Lee.

-->
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
BINGO, I had the a href = still saying '#' and then had the image linked twice instead of linking it like you have it. If I find out how to resize the images I'll post that I think there is definitely a way... I'm going to try this code now! Thanks Lee
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
In the script you can only set the tooltip to be as wide as the widest image.
Thats why this script works best if all the larger images are the same size (remeber you can edit image sizes by using picnik.com )

To set the width of the tool tip - find the 'customize area' in the top script and look for this: var tipWidth= 320;

I have this script on another page - works well - http://www.hexham.info/business -- the top links have it applied.
Photo of Yola_User_A

Yola_User_A

  • 276 Posts
  • 3 Reply Likes
I changed the tipWidth last night...
As for the image, I saw a tooltip like this >> blogger/images/tooltip.jpg width=220 height=147>
And the image comes up as that size but when I put it into my code it doesn't work...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
no it wont do - this script shows the file in its original size. You can edit the original file from the filemanager - right clcik the image - then edit - goto picnik and resize it - then save it back to Yola.
Photo of Sharmell

Sharmell

  • 1 Post
  • 0 Reply Likes
UK Duke, I found the code on dynamic drive and have been playing with it-trying to get it to work. I used to think I was an intelligent person; but, since I started trying to work with this stuff, I have decided maybe not so . .

I have a product page. It has 1 image and then a description and shopping cart. All I want to happen is for the customer to be able to place their mouse on the image and then see a larger version.

I don't want to have another page open. I don't want the text to be moved as image enlarges. I don't necessarily need the enlarged image to contain a label.

I really need step-by-step instructions as to how to set this up in Yola. I am very anal, but once I can see how something is done, I don't useally have any problems thereafter.

So far, all codes that I have found to do interesting effects and etc. requires access to the "head" and "body" sections of a website. Most codes also require knowing the file name of images. I don't know where to find this info for my website.

Any assistance you are willing to offer would be greatly appreciated.
Have a very blessed day.
Sharmell
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Sharmell,

Where to start?

1. Put in the filemanager 2 images -- 1 small and 1 full size... you can edit photos in Picnik, for it to work well you have to have a good quality large image and then make a small thumbnail size from that (not the other way round)

2. Go here http://www.dynamicdrive.com/dynamicin...

3. copy step 1 of the code and paste it into a html widget at the top of your web page.

4. in that code there is a section which says CUSTOMISE HERE....

make this:{ var tipWidth= 160; } wider than the large image.
then

the line that reads:
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
you have to point that at the large image which is in your filemanager
so where it says: 'red_balloon.gif'
make it say 'resources/LARGE IMAGE NAME.jpg'

you can also change the test 'Here is a red ballon..... to say whatever you like.

5. Now on the page add this link into the small image. To do this you have to have applied the image through a text widget not a image widget.

You clcik the html button to open the html editor and find the code for the small image.

it will look like this


--------------------------------------------------------------------------------------

That sounds like alot but i hope it makes it a bit easier for you.

Lee.
Photo of Femmy Victor Akene

Femmy Victor Akene

  • 3 Posts
  • 0 Reply Likes
hey uk duke. im not a web guy but im usually pretty good with following step by steps on here but for some reason yours is kicking my butt. 1. do i need the 2 different sized images loaded into the file manager or 1 image that you resize. 4. i dont understand that step could you simplify it a bit more. and your pic doesnt show so idk what the code for the small image looks like. thanks in advance for the help.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Femmy,

The script that I link to has been completley re written since I posted on this thread.

The best thing you can do is put 2 images in the file manager, 1 small, 1 large and then follow the instructions at dynamic drive > http://www.dynamicdrive.com/dynamicin...

In their example they use text as the hover link - if you just change the 'link 1' to the small image it will work.

If you get stuck following their explination give us a shout back on here.

Lee - http://hexham.info
Photo of Femmy Victor Akene

Femmy Victor Akene

  • 3 Posts
  • 0 Reply Likes
i was actually just reviewing the page again when u replyied to me just know and i saw that you also know how to create click to pop up boxes as opposed to the mouse over ones which would be much better for me. how is that done? the link you had for that one doesnt work for some reason.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Use this >
<!--

<a href="#" onclick="window.open('http://hexham.info','StatusBar','tool..." title="tool tip">MUSIC PLAYER</a>

-->

You can change the http://hexham.info to any web address you want.
Change the width and height to suit your own needs.

If you want to open an image instead of a web page just use the URL of the image.

Lee.
Photo of Femmy Victor Akene

Femmy Victor Akene

  • 3 Posts
  • 0 Reply Likes
ok when i try to download this link ddimgtooltip.js it wont open for me to edit it. how could i get around this?
Photo of Terri

Terri

  • 3 Posts
  • 0 Reply Likes
Try right clicking on it and opening it in Notepad or WordPad (after its downloaded). Not sure if there is a way to edit it without saving it to your computer.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great suggestion! However, I would stick with Notepad as it is automatically set up as plain text whereas WordPad is RTF.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
http://youcanneverbetoosmart.com

click the menu item "ShareAlike License", tell me if this is something you would like.

BTW, javascript (files) I believe are only possible with Yola Silver, not sure which Yola you have. However, it might be "possible" to use the javascript in an html widget...

<!--

<script language="javascript">

code

</script>

-->

Maybe someone that knows if you can do that can verify. When I use javascript (on another host) I don't ever use external js files, too much hassle, I just use it on page.

If you can use js like this, let me know if you want to use the popup window such as I have on that site above. I'll give you my js code, you just have to modify it to your purpose.