Mouseover Zoom not working

[krasatos]

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]

try to set direct urls to images.

[krasatos]

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]

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]

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]

Please give url to the page with this problem

[krasatos]

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]

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/creotiv/jquery-photowall/issues/33#issuecomment-24659486 .

[krasatos]

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