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