|
Post by chuckh on Jul 18, 2015 14:47:52 GMT
I have been trying to figure this one out for a while now. I have tried using the lightbox to make an image appear larger on mouse-over, but the only thing it does is put a small magnifying glass within the image to view a small portion of it within the boarder of the picture. The pictures I want to enlarge are 120 px. by 140 px. , so basically the lightbox has very little effect on it at all.
I also tried the "Rollover" and choosing a larger image from the "rollover image" drop down. The only thing that did was to change the original image into the larger image but it was still 120x140px.
I also tried the "swap image in" and "image to swap" drop downs in the "rollover" tab. Both images were the same sizs, in the same position. I also tried a second layer with a larger image, but nothing happened.
What I think I need to do is to click on the picture I want to enlarge the view for and use an "Event" to make it happen. But I am at a loss as to what code or codes to put into the "mouseover" command area of the code editor to make it work. The User Guide does NOT tell you how to do this. There are no codes in the User Guide. And the drop down menues within the code editor are just there.....without any explanation as to how to put the code in, or where, or in what order to use them.
Can someone please, please tell me how to put the code in to make this work, or find a code. I know this can be done within Antenna but I could not find a detailed tutorial on the Help Desk. Someone needs to make a detailed tutorial for the 'Events Code Editor" Or a tutorial on how to use a "Visual HTML" inserted on a second layer that somehow points to a second picture.
|
|
|
Post by Frank on Jul 18, 2015 15:11:17 GMT
You're looking at the zoom feature of the lightbox. Add a antenna lightbox. then on the MAIN TAB add the small image. then on the ZOOM TAB go down to the FX and pick lightbox from the dropdown. then add under the ZOOM IMAGE the larger image. You can use the same large image for both but it won't look as good resizing using the border-box instead of an actual smaller image.
Page 55 on help
A Light Box contains a picture, which expands to full size in the centre of the web page when clicked. The page background fades down, highlighting the expanded picture. In some ways it acts a bit like a pop-up, but without opening a separate window. There is also an optional magnifying glass effect, where a section of the image is magnified as the mouse cursor hovers over the picture. Add a Light Box control to your web page from either the toolbar or the Multimedia menu, then assign an image via its Image property. Dimmer Assigns the background colour to fade to when the Light Box is triggered. Dim-speed Determines the speed of the background fade effect. Fx Choose just the light box, zoom magnifying glass effect, or both. Zoom-box-size Set the size of the zoom magnifying glass area. Zoomed-image Usually two images are assigned to a Light Box. A small image for the web page, and a separate larger version of the image for the expanded light box.
Good luck, Frank
|
|
|
Post by Frank on Jul 18, 2015 16:31:20 GMT
The Antenna lightbox isn't the most sophisticated lightbox out there but it works very well at viewing one image at a time. If you have a group of image I would use one of a gazillion on the net. Cheers, Frank SEE: www.threefooter.com/enlarge-image/Also note that lightboxes normally show a large sample of the small image... so if you have a small image it won't enlarge it, and if it does it will be pixelated.
|
|
|
Post by Graham on Jul 19, 2015 1:09:26 GMT
There is a few easy ways to do this in Antenna 1. LightboxOn my template site here www.antennaaddons.grahamscomputers.net/templates1.htmthe images are set to an onclick event its just using the Antenna lightbox, as Frank says it works well 2. Lightframe- Add a lightframe object to your page and set it size
- Add your image to your page and resize it how you want.
- Click on the image, then in the link box type in the image name eg: image.jpg
- In the link target select light frame 1
[/b] - Add your large image to your page and then resize it down to a thumbnail
- CLick on your thumbnail and open the events then click in the mouse over tab
- On the Toolbar click on Objects and select this
- Click on the toolbar again and select Position, select .style.height='100px'; change the 100px to the size you want
- Repeat the same again but this time select .style.width='100px'; then change to your height setting
- Go to the mouse out tab and repeat the same instructions above but instead of the 100px for both put in your thumbnail size
Very quick and easy to do and works well, see a demo here www.antennaaddons.grahamscomputers.net/demos/resize.htmYou can also go a lot further and tell it what position on the screen you want to open it up and also the zindex if needed 4 More Events in AntennaUnder the functions button in Antenna you also have this for a popup window.open('myimage.jpg','name','left=500,top=100,width=550,height=240'); Graham
|
|
|
Post by Frank on Jul 21, 2015 22:10:49 GMT
I just tried a mouseover events on the lightbox and it worked! You pick the EVENTS in lightbox properties and on the MOUSEOVER tab you select: OBJECT: this Then from the FUNTIONS TAB you select Call Events, then chose ".onclick0;" from the dropdown. Now your mouseovertab should show: this.onclick(); it now opens the Lightbox on a mouseover. I was pleasantly surprised. Cheers, Frank
|
|
|
Post by Graham on Jul 22, 2015 2:17:46 GMT
This is what I have been playing with as well but I also changed the FX tab to just say lightbox instead of the default lightbox and zoom.
I loved the events in Antenna they are so versatile in what you can do
Graham
|
|
|
Post by chuckh on Jul 22, 2015 16:17:33 GMT
You guys are amazing with the help you provide!!!!! I am using the lightbox option to show larger images with one click. The website I am working on has hundreds of images that need to have this feature, so I have lot's of work to do. I'm doing this at the customer's request because she wants the pictures to have information as well. To save time I took screen shots with the Windows snippit tool on the websites that had the information I needed then used Corel Draw to edit those pictures to use for the large lightbox images instead of typing out all the imformation for each picture. One problem I am having is because I'm using screen shots the words are pix-elated and kind of faded. I thought of not doing the lightbox and just giving each picture a link to it's information page but then the customer who views the website will be sent to a different retailer and that would not be good for the person that I am designing the website for, so I'm kind of stuck with creating information lightboxes for each picture. The site I'm working with is www.wigsandthings.net . Please let me know if there is anything I can do to make this work better. Again.....you guys are awesome.
|
|
|
Post by Frank on Jul 22, 2015 17:52:36 GMT
How much information do you need to type up about the image? Can you have one of the images do what you have tested (you said it was pixelated) just to see you are trying to achieve. Cheers,
If you have a ton of text specs that you need to write up about the the wig then you might want to build a page per wig and show it in a Lightframe. same Idea as the light frame but it shows a full page of stuff.
|
|
|
Post by Frank on Jul 22, 2015 18:42:39 GMT
I'm assuming the information you need to add is similar to this sample. www.threefooter.com/wig1/Cheers, Frank PS: This doable but it will be a ton of work in Antenna... might want to look into something like a opencart... or some ecommerce platform.
|
|
|
Post by chuckh on Jul 22, 2015 19:08:45 GMT
I figured out that I can just copy and paste what I need instead of taking screen shots and then arrange it in Corel Draw then upload it into the image folder in Antenna to be used for the large image in the lightbox. Why didn't I think of this before.
|
|
|
Post by Frank on Jul 22, 2015 21:34:12 GMT
That seems to work. The image is 1 MG 300dpi in size so it take awhile to show. You can optimize it down to 65 KB and it still shows nicely. See sample: www.threefooter.com/wig1It loads fast on you pc because its in memory but if you go to your site and hit Ctrl + F5 key it will reload the site. Now when you click the small image you'll see the delay in the lightbox showing. Food for thought.
|
|
|
Post by Learning Antenna on Jun 28, 2018 21:19:39 GMT
Hi there. I was looking for gradual (smooth) "zoom over hovering", and found this thread, but information here doesn't solve my quandary. I am looking for a way to implement this: www.w3schools.com/howto/howto_css_zoom_hover.aspTo achieve this effect (hover on images): www.latostadora.com/rasgoaudaz/1/o1Is this "smooth zoom" possible to implement in Antenna? I have achieved zoom by resizing through 3rd method you talked about ("event script in Antenna"), but not this "smooth zoom" which is so much more pleasant. Thank you in advance, Sam
|
|
|
Post by Frank on Jun 29, 2018 0:32:29 GMT
You can do it with this script in the body tab of a visual html where the image: dog.jpg is 250x187
<style> .zoom { background-image:url(dog.jpg); transition: transform .2s; /* Animation */ width:250px; height: 187px; margin: 0 auto; }
.zoom:hover { transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } </style>
Cheers Frank
|
|
|
Post by Frank on Jun 29, 2018 0:53:20 GMT
My code above kinda works .. needs work for multiple images... still might help you.
|
|
|
Post by Frank on Jun 29, 2018 1:34:42 GMT
This actually works on all image on a page... Make a visual html In the <head. tab add: <style> .zoom { transition: transform .2s; /* Animation */ } .zoom:hover { transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } </style> In the <body> tab add; <img src="dog.jpg" class="zoom" alt="girl"/> The class calls up the "zoom" style and it zooms 150% This works
|
|