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 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
Re: JQuery Galleryview in zen cart
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?
Re: JQuery Galleryview in zen cart
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
PHP Code:
<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
PHP 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
Re: JQuery Galleryview in zen cart
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!
Code:
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 />
Re: JQuery Galleryview in zen cart
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
PHP Code:
$(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:
Re: JQuery Galleryview in zen cart
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
Code:
<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
Re: JQuery Galleryview in zen cart
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
Re: JQuery Galleryview in zen cart
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.
Re: JQuery Galleryview in zen cart
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
Re: JQuery Galleryview in zen cart
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.
Re: JQuery Galleryview in zen cart
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.
Re: JQuery Galleryview in zen cart
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
Re: JQuery Galleryview in zen cart
Hello again. You need to help us to help you. For example, I suggested you use Firebug to diagnose some problems.
Quote:
Originally Posted by
rapro
the problem is that it somehow does not see smaal pictures and prev.gif and next.gif.
If you used Firebug, you would see:
""NetworkError: 403 Forbidden - http://www.witgoedextra.nl/wxt/includes/templates/wxt/jscript/jscript_themes/dark/next.gif""
You need to change permissions on those prev/next files to be something like 644, at the moment the permissions are wrong. Look for chmod in your ftp client.
Next, I suggested you change the transition time from zero.
Quote:
Originally Posted by
rapro
The timer does work tho so i can let it change every 5 or 10 sec.
Cant figure it out :lookaroun
Well, this is because you didn't change the transition time from zero, like I suggested.
So, your original code as I found it:
http://www.digitaltoast.co.uk/zen/wit1.php
now after 5 seconds work to change
transition_interval: 0
to
transition_interval: 3000
it looks like this http://www.digitaltoast.co.uk/zen/wit1.php.
But still no thumbnail.
Now what I am most confused about is how you have got from the example code of this:
Code:
<li><span class="panel-overlay">This is an overlay</span><img src="http://appleton.me/wp-content/themes/appleton.me 1.6/images/01.jpg" /></li>
to this:
Code:
<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;" alt="test"></img>
<span class="panel-overlay" style="position: absolute; z-index: 999; width: 778px; left: 0pt; bottom: 0px;">This is an overlay</span>
I have no idea where all that other stuff came from, but it will definitely break the plugin!
And you cannot use img tags like this
<img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/01.jpg"></img>
It must be:
<img src="http://www.witgoedextra.nl/wxt/includes/templates/wxt/images/gallery/01.jpg" />
Again, if you used that validator, it would tell you about this.
So, I stripped out all that extra stuff, and just used the example code with your links (1 minute) and now it looks like:
http://www.digitaltoast.co.uk/zen/wit3.php
So, now you just need permissions for your arrows.
We all started out new sometime, but if you are just starting with html and stuff, then it's good to look CLOSELY at what other people have done, and how and why it works.
Re: JQuery Galleryview in zen cart
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:
Re: JQuery Galleryview in zen cart
Quote:
Originally Posted by
rapro
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
Well, you said you were looking at the site http://appleton.me/galleryview/
So I thought "well, that works... VIEW > SOURCE". That's all.
Quote:
Originally Posted by
rapro
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:
No problem! Glad we got there in the end :)
The extension Firebug is here:
https://addons.mozilla.org/en-US/firefox/addon/1843/
You open firebug, click on "console", then reload your page. You will see the errors. Don't worry about CSS errors too much.
You can also see html and script errors on the different tabs, too.
Good luck!
