JQuery Galleryview in zen cart

Hi everyone,

I am trying to get Gallery view on main page of my zen cart, but becouse i am not good at php and css it dont ownna work.

Everythink i have done seems to be oke. I uploaded script in my jscript map and called them out in header. Placed css there too. The java part was even working but i failed to set all thinks in php to get good final result.

If anybody have experiance with this i realy like to learn and understand how it works and where i went wrong.

JQuery galleryview js is from this website:

http://spaceforaname.com/gallery-dark.html this is also the link to pert that i wonna use.

I also inspected this site with firebugs from FF and did everythink like they did but still coudent get it to work properly.
I still gonna try it.

Here is link to my zen https://www.witgoedextra.nl/wxt , but i deleted it for now and gonna try it from the begining.

Any advise on how to get it going is apresiated :D

Oke i am trying to make this task more easy for myself. I started with simpler version of this. You can see it working at:

http://appleton.me/galleryview/

So far i do belive i did most of it correct.

In define_mane_page.php i added the following code in head

<link rel="stylesheet" href="includes/templates/wxt/css/galleryview.css" type="text/css" />

<script src="includes/templates/wxt/jscript/jquery-1.3.2.min.js"></script>
<script src="includes/templates/wxt/jscript/jquery.easing.1.3.js"></script>
<script src="includes/templates/wxt/jscript/jquery.galleryview-2.1.1-pack.js"></script>
<script src="includes/templates/wxt/jscript/jquery.timers-1.2.js" type="text/javascript"></script>

<script type="text/javascript">

		$(document).ready(function(){
			$('#gallery').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 50,
			frame_height: 50,
			transition_speed: 350,
			easing: 'easeInOutQuad',
			transition_interval: 0
			});
			}); 
</script>

Now i can see my gallery react to changes in called css file and i hope i did everythink correct with java scripts.

In body i added folowing code

<div id="gallery" class="gallery" style="visibility: visible; padding: 0px; position: relative; width: 810px; height: 367px;">
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px; display: none;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/01.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is an overlay</span>
		<div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px; display: none;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/02.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is another overlay</span>
		<div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px; display: none;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/03.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is yet another overlay</span>
		<div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="panel" style="width: 800px; height: 300px; position: absolute; overflow: hidden; top: 5px; left: 5px;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/04.jpg" style="height: 300px; width: 800px; position: relative; top: 0px; left: 0px;"><span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is an overlay too</span>
		<div class="overlay-background" style="position: absolute; z-index: 998; width: 800px; left: 0pt; opacity: 0.7; bottom: 0px;"></div></div>
<div class="strip_wrapper" style="position: absolute; overflow: hidden; top: 305px; left: 293.5px; width: 223px; height: 57px;"><ul style="visibility: visible; margin: 0pt; list-style: none outside none; padding: 0pt; width: 228px; position: absolute; z-index: 900; top: 0px; left: 0px; height: 57px;" class="filmstrip">
    <li class="frame" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/01.jpg" style="opacity: 0.3; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
    <li class="frame" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/02.jpg" style="opacity: 0.3; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
    <li class="frame" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/03.jpg" style="opacity: 0.3; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
    <li class="frame current" style="float: left; position: relative; height: 52px; width: 52px; z-index: 901; padding: 0pt; cursor: pointer; margin-top: 5px; margin-right: 5px;"><div class="img_wrap" style="height: 50px; width: 50px; position: relative; top: 0px; left: 0px; overflow: hidden;"><img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/04.jpg" style="opacity: 1; height: 50px; width: 133.333px; position: relative; top: 0px; left: -41.6667px;"></div></li>
</ul></div><div class="loader" style="position: absolute; z-index: 32666; opacity: 1; top: 0px; left: 0px; width: 810px; height: 367px; display: none;"></div><div class="pointer" style="position: absolute; z-index: 1000; width: 0px; font-size: 0px; line-height: 0%; border-width: 8px; border-style: solid; top: 294px; left: 483px; border-top: 8px solid transparent; border-right: 8px solid transparent; border-left: 8px solid transparent;"></div><img class="nav-next" src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/jscript/themes/dark/next.gif" style="position: absolute; cursor: pointer; top: 325px; right: 266.5px;"><img class="nav-prev" src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/jscript/themes/dark/prev.gif" style="position: absolute; cursor: pointer; top: 325px; left: 266.5px;"></div>

Everythink seems correct to me so far. I got this all from example while using firebugs.

At my site u can see what i got so far. It still not good.

BTW if u look at my site with smaller monitor it might look weird i will correct it later but first trying to get this gallery thing working.

Kelvyn

i think u right with javascript being not in head of loaded page, it in head of myn define_mane_page.php

How do i get it in right place? and i want gallery only on main page so i thought it was oke.

My english is pretty bad in writing but when i read i can understand almost everythink so i can work with english instruction with out problem :P

Thanks Kelvyn for this link it helped alot. I still have 6 things in there to fix.

Now i found that i can preload css by putting style in front and js files by putting jscript in front.

One other problem is that i have to put galleryview code somewhere
I dont know where at the moment. Code is

$(document).ready(function(){
			$('#gallery').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 50,
			frame_height: 50,
			transition_speed: 350,
			easing: 'easeInOutQuad',
			transition_interval: 0
			});
			}); 

at the moment i dont have it nowhere included becouse when i do it everythink gets messed up.

If anyone have an idia or experiance with it plz let me hear it :smile:

yep i tryed it too before.

the problem is that it somehow does not see smaal pictures and prev.gif and next.gif.

It happens when i add code manual in html_header.php just before the </head> and when i let it load as new script with jscript_name.js.

The timer does work tho so i can let it change every 5 or 10 sec.

Cant figure it out :lookaroun

Can someone with experiance take a look at it plz?

I spend few days on it and cant get it out my head before i get it working. I also did read alot of info on this forum and on external sites but still no succes.

try moving the javascript to includes/templates/YOURTEMPLATE/common/html_header.php.
i found this works when other locations occasionally do not.
best place i found to put it is after css is loaded, hence at the very bottom, just inside the closing </head> tag.

hope this helps
andrejs

one other thing, not sure what your gallery is or how you downloaded the source, but many jquery problems can stem from having inconsistent versions of the easing plugin, the jquery library and other various plugins. usually the documentation that came with your solution will explain which versions are compatible, i have run into great difficulty when using two different jquery plugins meant to be used with two different jquery libraries.

Aliepinieks thanks for respond:smile:

I forgot to say that i tryed jquerry 1.2.3, 1.3.2 and now i have the latest 1.4.2 running

I did not tryed to use different or newver version of easing or timer jscripts.

Gonna try it out now.

What do u mean by "try moving the javascript to includes/templates/YOURTEMPLATE/common/html_header.php." ?

I have one litle part in there and other scripts working on "preload?"
I have them in includes/templates/custom/jscript and i added jscript_ before each of them so they are loaded on all pages.

Oki tnx for now gonna try different easing and timer js.

this last point is possibly the most important in my opinion, as this is one of the key locations for files requiring edits when customising a ZC installation. i would concentrate on this before fiddlign with different versions, as while they can have an impact, it is more likely the fact your scripts and your html are not loading in the right sequence.

the jscript should be placed into /includes/templates/YOURTEMPLATE/common/html_header.php, where YOURTEMPLATE is your customised override folder (as explained in the zen-cart FAQ's). if you do not have an override folder structure, i urge you to look at the FAQ's before proceeding. while you will not save time now, you will in future as aspirations for your site grow and upgrades become more important.

as previously suiggested, i would recommend you place the script immediately before the closing </head> tag in this file. hope this helps, as i'm not sure how much clearer i can be here.

andrejs

Wow guys thank you so much !!!

Kelvyn u opened my eyes! this is it the hole code is wrong. i got all this code from furebug i dont know where and how u got ur code and where and how u do see errors in firebug but now i know that it all wrong.

I did played with different tansitions intervals but putted it to 0 again to keep it "original".

About image tags i didnt knew it. It gave errors at http://validator.w3.org/ and when i changed it to </img> error at those lines where gone so i thought it was oke like this.

Now i am not sure if we using same firebug i added ss from my firefox bottom.
http://img197.imageshack.us/img197/3279/fi

Thank you once again! i got some work to do :lamo: