Skip to content
This repository has been archived by the owner on Oct 25, 2021. It is now read-only.

Mouseover Zoom not working #33

Open
krasatos opened this issue Sep 15, 2013 · 8 comments
Open

Mouseover Zoom not working #33

krasatos opened this issue Sep 15, 2013 · 8 comments

Comments

@krasatos
Copy link

hey, i am trying to load the plugin with local images.
a php code is reading the directory of photos and outputs something like this:

              {id:'photo-83',
              img:'images/photoshoot1/IMGL8043.jpg',
              width:500,
              height:400,

                th:{src:'images/photoshoot1/thumbnails/IMGL8043.jpg',
                   width:50,
                   height:40,
                  zoom_src:'images/photoshoot1/thumbnailszoom/IMGL8043.jpg',
                     zoom_factor:4
                   }
               },

              {id:'photo-84',
              img:'images/photoshoot1/IMGL8044.jpg',
              width:500,
              height:400,

                th:{src:'images/photoshoot1/thumbnails/IMGL8044.jpg',
                   width:50,
                   height:40,
                  zoom_src:'./images/photoshoot1/thumbnailszoom/IMGL8044.jpg',
                     zoom_factor:4
                   }
               }

Everything works perfect, but when i hover an image i get this error in the console:

TypeError: item is undefined
http://localhost/noi2/jquery-photowall/jquery-photowall.js
Line 410

which hits in the .js file on these lines:

var item = PhotoWall._photos[container.attr('id')];
// Preload zoomed image and replace old only when it loaded.
var bigIMG = $('');
bigIMG.attr('src',item.th.zoom_src);

any ideas?
thanks in advance

@creotiv
Copy link
Owner

creotiv commented Sep 15, 2013

try to set direct urls to images.

@krasatos
Copy link
Author

hey there again, thank you for your prompt answer,
if by "direct url" you mean setting in the javascript
zoom_src:'http://localhost/site/images/photoshoot1/thumbnailszoom/IMGL8044.jpg',

tried it but it doesnt work...
unfortunatelly i am kinda new to this and i cant quite figure out the javascript in the js file...
any other thoughts?

ps:
i also get these in the error console, but i dont know if it has anything to do with the above:

"NetworkError: 403 Forbidden - https://moaddel.googlecode.com/files/up.png"
up.png
"NetworkError: 403 Forbidden - http://moaddel.googlecode.com/files/Join.png"
Join.png
"NetworkError: 403 Forbidden - http://moaddel.googlecode.com/files/Spong.png"
Spong.png
"NetworkError: 404 Not Found - http://function-cerezial.googlecode.com/files/(u3++)undefined"

@krasatos
Copy link
Author

if it helps:
console.log(container.attr('id'));
gives the correct id of the hovered picture

console log (PhotoWall._photos[container.attr('id')])
on the other hand gives: undefined, that's where it's lost i think :)

@krasatos
Copy link
Author

figured it out:
i dont know if i was supposed to change the id:id in the code initiation but it was giving me an error not letting javascript load
so i gave each image an id of image-[increasing number]
this id was not being recognised in the .js file, so it was giving the undefined thingy at line:

var item = PhotoWall._photos[container.attr('id')];

so i split the id, from image-XX to XX, then substracted one to start counting from zero and used this number as a key to the data or PhotoWall._photos array,
here's the final code around line 409 of the jquery_photowall.js file:

                //comment this out
                //var item   = PhotoWall._photos[container.attr('id')];

                ////custom code 
                imgnum = container.attr('id').split("-")[1] -1;
                var item   = PhotoWall._photos[imgnum];

it was probably my mistake as i messed the id:id thingy, but i cannot figure out how it's supposed to work... anyways, if you got a solution to this, i'd like to use your original code, else im fixed and working :)

thanx for the support and this great script!

@creotiv
Copy link
Owner

creotiv commented Sep 17, 2013

Please give url to the page with this problem

@krasatos
Copy link
Author

www.readyg0.com/noi

i also just noticed that zooming the page (crtl+scroll) messes up stuff...
at some zoom levels the lines appear wrong (one picture of each line gets pushed to the next one creating a new line with just one row)
also the onhover zoom doesnt seem to work after you change the page zoom (crtl+scroll)
you can check it out in the link i gave you. should i open a new ticket about the zooming issue?

@creotiv
Copy link
Owner

creotiv commented Sep 18, 2013

Zooming and gallery is working fine in chrome. Which browser do you use?

Kindly yours,
Andrey Nikishaev

LinkedIn http://ua.linkedin.com/in/creotiv
GitHub http://github.com/creotiv
Skype creotiv.in.ua
Mobile +380632410666

On Wed, Sep 18, 2013 at 3:11 PM, krasatos [email protected] wrote:

www.readyg0.com/noi

i also just noticed that zooming the page (crtl+scroll) messes up stuff...
at some zoom levels the lines appear wrong (one picture of each line gets
pushed to the next one creating a new line with just one row)
also the onhover zoom doesnt seem to work after you change the page zoom
(crtl+scroll)
you can check it out in the link i gave you. should i open a new ticket
about the zooming issue?


Reply to this email directly or view it on GitHubhttps://github.com//issues/33#issuecomment-24659486
.

@krasatos
Copy link
Author

it happens to me on various zoom levels both on chrome and FF, look at some screenshots:
ff
chrome

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants