sethrose
(Seth)
April 24, 2015, 5:57pm
1
Does anyone know of an action that can zoom in on text or an image in a window or circle and move with the users cursor? i.e. the user would click on a magnifying glass icon and the zoom window would appear and then move with cursor.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
No actions but there are plenty of external scripts that can do this - here is one http://www.deltadesign.co/fw_examples/jQuery/rbzoom.html
Look at the motorbike in the middle of this page http://codecanyon.net/item/product-image-zoom-plus/full_screen_preview/5901974
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Richard
(Richard)
April 24, 2015, 9:41pm
3
Wow, that’s been a few years since we’ve covered that one …
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Matt2
(Matt)
April 24, 2015, 9:59pm
4
sethrose
(Seth)
April 25, 2015, 8:13am
5
Perfect gents, Thank you!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 26, 2015, 2:11pm
6
I was able to get the script to work but I can’t seem to get the zoomed image to appear in front of the small image. Any ideas?
http://theminesoflight.com/zoomtest.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Matt2
(Matt)
April 26, 2015, 2:25pm
7
Hi Seth, in your query.elevatezoom.js file at line 260 change
self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');
to
self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;z-index:999;"></div>');
Matt.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Matt2
(Matt)
April 26, 2015, 2:30pm
8
Sorry and line 319
self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);
to
self.zoomWindowContainer = $(’
’).addClass(‘zoomWindowContainer’).css(“width”,self.options.zoomWindowWidth,“z-index”, 999);
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Matt2
(Matt)
April 26, 2015, 2:32pm
9
self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth,"z-index", 999);
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Matt2
(Matt)
April 26, 2015, 2:35pm
10
Alternately I’ll send you the js file and stop making a mess copy & pasting!!!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 26, 2015, 2:56pm
11
Well, I changed the 2 lines but now the script doesn’t seem to work…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Matt2
(Matt)
April 26, 2015, 3:02pm
12
Try replacing with js file in example download
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 26, 2015, 3:17pm
13
That did it… thanks again!!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 28, 2015, 9:07am
14
I’m back with one more question… I would like to change the cursor on the image being zoomed. I’ve added an image style pointing to the cursor I want to use but can’t seem to get it work. example here:
http://theminesoflight.com/zoomtest.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You will need to change the file format of your cursor image from magnify.cur to magnify.gif (or png etc)
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 28, 2015, 9:39am
16
Replaced the cursor file and the style with magnify.gif but still not working…
http://theminesoflight.com/zoomtest.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Try adding it to the Div - div class=“zoomLens”
ie something like
div.zoomLens {
cursor:url ('http://theminesoflight.com/Resources/magnify.gif')";
}
I should add that the .cur file is required for IE - an image file for most sensible Browsers
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 28, 2015, 10:07am
18
Sorry, not quite sure how to add the div class. item:extend:div?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 28, 2015, 11:24am
19
I created a new style called .zoomLens and under extended added name: cursor value: url(http…) then under item:extended:div added name:class value:zoomLens so I must be missing the boat here…
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
sethrose
(Seth)
April 28, 2015, 12:06pm
20
another observation… it seems Freeway is not producing a css folder nor a stylesheet in the site folder when it publishes the site. Could this have a bearing?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options