JQuery Galleryview in zen cart

[rapro]

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 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

[kelvyn]

Well, you have put all your javascript halfway down the page - it must be in head.
Next, "pointer","next" and "prev" are not loading.
Finally, you are trying to use a tiny tiny image for a big image.

This will not scale up to the size you want!
http://www.witgoedextra.nl/wxt/inclu.../frame3-04.jpg

I realise English is not your language, but there may be a translation of instructions available?

[rapro]

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

[kelvyn]

Don't know if it makes much difference, but it's failing to find:

"NetworkError: 404 Not Found - http://www.witgoedextra.nl/wxt/includes/templates/wxt/css/loader.gif"

If I copy the result of "view source" into an html editor, it throws the following warnings, most serious of which is that you have TWO head and body tags!

Found 0 errors 20 warnings
line 28 column 1 - Warning: missing </a> before </div>
line 32 column 1 - Warning: inserting implicit <a>
line 32 column 1 - Warning: missing </a> before <div>
line 158 column 54 - Warning: discarding unexpected <html>
line 159 column 1 - Warning: discarding unexpected <head>
line 162 column 1 - Warning: <link> isn't allowed in <div> elements
line 186 column 1 - Warning: discarding unexpected <body>
line 189 column 131 - Warning: <img> element not empty or not closed
line 191 column 131 - Warning: <img> element not empty or not closed
line 194 column 131 - Warning: <img> element not empty or not closed
line 196 column 116 - Warning: <img> element not empty or not closed
line 199 column 288 - Warning: <img> element not empty or not closed
line 200 column 288 - Warning: <img> element not empty or not closed
line 201 column 288 - Warning: <img> element not empty or not closed
line 203 column 296 - Warning: <img> element not empty or not closed
line 204 column 447 - Warning: <img> element not empty or not closed
line 204 column 631 - Warning: <img> element not empty or not closed
line 164 column 1 - Warning: <script> inserting "type" attribute
line 165 column 1 - Warning: <script> inserting "type" attribute
line 167 column 1 - Warning: <script> inserting "type" attribute

To help fix these, click the following link and it will explain how to fix the site.

http://validator.w3.org/check?uri=ht...Inline&group=0

My bet is that you are closing img tags with > and not />

[rapro]

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

[kelvyn]

Have a look at the source of the demo page you were looking at. That code just goes in before </head>

So, it should look like

<script type="text/javascript" src="/wxt/includes/templates/wxt/jscript/jscript_jquery.timers-1.2.js"></script>
<script> 
	$(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> 
</head>

I notice on the demo page, and on your page, you have:
transition_interval: 0
I believe this means you will not have it automatically starting.
Try
transition_interval: 5000
for it to change every 5 seconds, for example

[rapro]

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

[rapro]

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.

[ALiepinieks]

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

[ALiepinieks]

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.