WebsiteBaker Community Forum
General Community => WebsiteBaker Website Showcase => Topic started by: Boudi on October 01, 2008, 08:21:16 PM
-
Hi,
Fresh from the press: www.telmakelaars.nl (http://www.telmakelaars.nl)
Nice & clean 100% custom made with WB as a backend :lol:
Some nice additions:
- customized Image Flow in the header (thnx 2 Ruud)
- form field: highlight input fields on focus (fixed the stupid IE bug)
- a bit of tweaking in the Catalog mod
The website needs additional input from the client but overall you get an idea of the layout et cetera.
Greetz
Boudi
-
Hi Boudi,
as a already mentioned. I like th IF in the header. Nice idea.
Overall the page looks good.
But there are some edges.....
For the overall-Look I guess, the Footer should have the same green than the menu, or the top-background - I mean the green above the header. Why not use this as body-background ?
And there is a BIG BUG :wink: in BEMIDDELD: The grphics - all of them - are too big. Together with IF and the Logo the page is more than 1MB - than You link to annother page where the same pics are used - also 800x600 px or so but displayed around 200px - and from here You link to the full image. Please make thumbs for the pages.
And one major thing. You propably know: You are using the high-slide option. This must be registered and licenced! The page doesn´t appear as private - is it?
regards from Himberg
-
Hi Vyni,
ThnQ for your reaction, Appriciate it.
1st: yes it is a payed license of HighSlide :-)
Regarding the footer: This was the client his wish but I understand your point. For me the green was okay too :-)
Regarding the pictures: the client uploaded them, I will contact them about changing the size of the pictures. Big stuff haha :lol:
The graphics including the HS from the website itself are only 160 kb together. The picture sizes in the Catalog mod can be a lot smaller indeed. Thank you fot noticing!
-
You are welcome!
It´s almost everytime the same - unexperienced users don´t care about pics and loading-time. :lol:
-
It looks very nice.
I really like the idea of imageflow in the page header.
One small problem found, the second image doesn't grow when clicked, it gets smaller!
I think you used a wrong image there.
I also would try to suppress the "loading" message.
In the lightbox.css you could set:
#loading_bar{
display:none;
....
or completely remove it by removing this part from the imageflow/view.php
<div id="loading_bar">
<b><? echo $MOD_IMAGEFLOW['LOADING_IMAGES']; ?></b><br />
<img src="<? echo WB_URL; ?>/modules/imageflow/images/imgloading.gif" width="208" height="13" alt="<?php echo $MOD_IMAGEFLOW['LOADING_IMAGES']; ?>" />
</div>
Cheers,
Ruud
-
Since you are using Higslide on every page (js is loaded). Why not using it for the catalog images too?
It is very simple.
In the catalogs module file details_elements.tp l find line 46 that says:
<IMG SRC={$pics[sec2].direction_pic}>
Replace that with:
<a href="{$pics[sec2].direction_pic}" class="highslide" onclick="return hs.expand(this)"><img src="{$pics[sec2].direction_pic}" alt="Highslide JS" title="Click to enlarge" width="100" /></a>
Did a quick test and it looks nice.
Ruud
-
Jo, Ruud is right.
Also You could give a little mirror - this would fit to the Logo.
PS: I think I will edit and extend the Manual.
-
@ Ruud,
Thnq 4 the compliments. :-)
Your suggestion regarding the loader: the CSS does not work. When removing the lines in the view.php does result in that the IF vanishes from the header.
So right now in my case both options didn't help :oops:
Regarding implementation HS into the Catalog mod...check the website :-D :-D :-D
-
Your suggestion regarding the loader: the CSS does not work. When removing the lines in the view.php does result in that the IF vanishes from the header.
The CSS did work for me. Just add the line "display:none;". Don't do anything else.
Did you clear your cache when you tried? Refreshing with Ctrl-F5 normally helps.
Removing the view.php part could cause the script to fail, so that could be the case (didn't test that).
About the catalog.. This looks much better. It's a shame you also made the images smaller ;-)
I will have a try tonight to rewrite the line in the .tpl where it builds thumbnails through the Imageflow resizer script. That way you could have your bigger images back, and the nomal page would even be smaller.
Ruud.
-
@Boudi,
please check Your spelling. I made it right now for the manual and the css display: none; is working in IE and FF !!
@Ruud
I am a little bit confused: if I follow the instructions for calculating the middle-image for the glideTo for pic 12 I come to result 1650 ?!
regards
-
@Ruud
I am a little bit confused: if I follow the instructions for calculating the middle-image for the glideTo for pic 12 I come to result 1650 ?!
Did you put a - (minus) in front of it?
Ruud
-
@Boudi
regarding catalog: is great, just the pics are still 800x600 ??
@Ruud
:evil: of course. What do you think? But You count (nr-1) - this is 11 * 150 = 1650 if minus or plus - thats the same
-
#loading_bar{
display:none;
}
Still does not work for me.
Removed cache
Reloaded addons
Regarding the pictures: I did do nothing about the sizes till so far. 8-)
-
Mr. Boudi :-D
I´m really sorry, but I have to inform You, that there is something wrong with Your setting.
Maybe You should try to read the manual exactly.
Have a look what happens if I go to Your catalog.
If You need any further help, please do not hesitate to contact a specialist.
[gelöscht durch Administrator]
-
Currently your /modules/imageflow/imageflow.css still says:
#loading_bar{
margin-top:50px;
text-align:center;
width:100%;
You should change it to:
#loading_bar{
display: none;
margin-top:50px;
text-align:center;
width:100%;
Ruud
-
@ Vyni & Ruud
It works! Stupid me, I overlooked the css stylesheet because I was looking into the folder: imageflow/css/ and not in the imageflow/
Excuse me for this blackout. The only reason I can say is that I must stay sober every day and watch less cows! :mrgreen:
-
Looks good. You can now have a beer and a nice steak 8-)
It also solves the problem mr. Vyni tried to tell you about.
Cheers,
Ruud
-
@ Vyni & Ruud
Thnq for taking much time to help me and this thing out. But in the end it looks great :roll:
I think that I will become a vegetarian :-P :-D
Greetz,
Boudi
-
If it helps. :-D :-D
So what about a small reflection?
Just try and show it to me, please.
You are right, it´s great.
-
So what about a small reflection?
Euhh?? :?
-
Aha,
tell me - whatfor do I write, (as instructed by Mr. Ruud extra slowly) if You don´t read?
In the options of the imageflow You could set a refledtion (try 30%)
There is annother detail disturbing me: Please add the country-code to the mobile-phone-nr aswell - otherwise looks wrong to me.
-
This looks great:
http://www.telmakelaars.nl/pages/catalog/nietap2.php?cat_id=1&number=0
I like the image Pop-Up.
@Vyni
What about implementing the "fancy box" to the imageFlow? :evil:
Regards,
Stefek
-
I would be glad if I could.....
But this is Mr. Ruud´s territory.
-
@ Vyni
In the options of the imageflow You could set a refledtion (try 30%)
Did it. Looks great :-)
There is annother detail disturbing me: Please add the country-code to the mobile-phone-nr aswell - otherwise looks wrong to me.
Yesss. You're right. Changed it.
There is a minimum green in the header-grapic, so the black of the reflection is visible.
You mean the dark grey area that is in the header in combination with the border on the images?
I just removed the border so this looks better. And you do so too I read now haha :lol:
-
I would be glad if I could.....
But this is Mr. Ruud´s territory.
I got it.
Ruud, did you have see the german thread about the "FancyBox"/"Fancy Image"?
It seems to me that this could be implemented into this module. But I dont know how many effort it is.
Regards,
Stefek
-
@Boudi
jo, great. Just something with the fax-nr aswell. Maybe a space within the country-code? Try +31 instead of + 31.
:-D I thought maybe You see it.
But I dont know - maybe it´s just the plug-in which catches tel and mobile, but not fax ??
@Stefek
??......instead of highslide? - YES this would be great. And putting it in the header and You have it WB-wide.
-
Ruud, did you have see the german thread about the "FancyBox"/"Fancy Image"?
Yep, seen it.
I would have to have a better look at the original FancyBox, but it might be doable.
Select one of 3 zoom engines.
Ruud
-
Ruud, did you have see the german thread about the "FancyBox"/"Fancy Image"?
Yep, seen it.
I would have to have a better look at the original FancyBox, but it might be doable.
Select one of 3 zoom engines.
Ruud
This would be great.
To me it seems, that the "Lightbox" Fashion is "expired" and outdatet. :-)
The Fancybox instead is up to date and comes with a fresh impact.
The original script uses jQuery.
http://fancy.klade.lv/
Regards,
Stefek
-
The most benefit would be the exiting zoom, if up-to-date or outdated.
It´s free as I understood. And with this example of putting the show in the header, it is easy to set this thing to the whole page. Just adding a block (or like here in the header) but accessable through the backend, if You want to use it as galery aswell. Adding the necassary ID for the link can be comfortable done by FCK.
But we should change the thread......
-
@ Stefek
This looks great:
http://www.telmakelaars.nl/pages/catalog/nietap2.php?cat_id=1&number=0
Thnq! Appreciate it :-)
For further small adjustments within the Catalog mod I will put them in this thread:
https://forum.WebsiteBaker.org/index.php/topic,1463.60.html (https://forum.WebsiteBaker.org/index.php/topic,1463.60.html)
Greetz
Boudi
-
@Boudi
One more improvement.. Just in case you can't get enough of it.
Just did some small test to use the resizer from imageflow in the catalog.
In /module/catalogs/view.php you need to change the following:
From line 517 (the 2 lines with thumbnail_pic are added):
if($num_pics > 0)
{
while($element = $query_pics->fetchRow())
{
$pic= stripslashes($element['pic']);
$direction_pic=WB_URL.MEDIA_DIRECTORY."/cat_pics/".$pic;
$thumbnail_pic=WB_URL."/modules/imageflow/reflect.php?img=/cat_pics/".$pic."&height=1&jpeg=70&newwidth=100&cache=1";
$smarty->append('pics',array(
'pic'=>$element['pic'],
'thumbnail_pic'=>$thumbnail_pic,
'direction_pic'=>$direction_pic
));
}
}
Next in details_elements.tp l the line you changed before to get highslide working
<a href="{$pics[sec2].direction_pic}" class="highslide" onclick="return hs.expand(this)"><img src="{$pics[sec2].thumbnail_pic}" alt="Highslide JS" title="Click to enlarge" width="100" /></a>
You could use the same thumbnail trick on the list page too.
If you need help on doing that, let me know. You might be able to find out yourself looking at the code for the details pages.
Note: This will work because the imageflow module is installed.
Don't use this on other sites (without imageflow module)
Groetjes,
Ruud
-
hi Ruud,
Just implemented it but it didn't do the trick.
The view.php was original so there could be no error I think.
The details_elements.tp l is rather ripped off so may be here could be an error.
I give you a piece before and after the position where your code should be (this is the current code)
<?php if ($this->_tpl_vars['pics'][$this->_sections['sec2']['index']]['pic'] != ""): ?>
<a href="<?php echo $this->_tpl_vars['pics'][$this->_sections['sec2']['index']]['direction_pic']; ?>
" class="highslide" onClick="return hs.expand(this)"><img src="<?php echo $this->_tpl_vars['pics'][$this->_sections['sec2']['index']]['direction_pic']; ?>
" alt="Highslide JS" title="Klik om te vergroten" width="100" /></a>
<?php endif; ?>
When changing your code with the piece that is in the middle it does not work :-(
-
The additional ines in view.php will create an extra element (called thumbnail_pic) in the "pics" array.
You want to use the thumbnail in the <img src=""> part. So your code would become:
<?php if ($this->_tpl_vars['pics'][$this->_sections['sec2']['index']]['pic'] != ""): ?>
<a href="<?php echo $this->_tpl_vars['pics'][$this->_sections['sec2']['index']]['direction_pic']; ?>
" class="highslide" onClick="return hs.expand(this)"><img src="<?php echo $this->_tpl_vars['pics'][$this->_sections['sec2']['index']]['thumbnail_pic']; ?>
" alt="Highslide JS" title="Klik om te vergroten" width="100" /></a>
<?php endif; ?>
Find the "thumbnail_pic" to see where it changed.
Ruud
-
Ok done, Implemented it.
But ehm no offense :oops:, I see no difference? other than what was already there? :|
-
Look at the properties of a thumbnail in a details page.
You will see it is now 3kb instead of the 300kb of the original image.
A page like http://www.telmakelaars.nl/pages/catalog/de-wilp32.php?cat_id=1&number=0 will load about 2MB less data.
Some people (especially with 48kb dial-up modems) will see the difference.
-
Holy steak!
Yes now I noticed it (Got a rather fast computer here so I switched to antoher)
What a difference!!! It loads in a glimp :lol:
You are right..I try to implement this in the main page too!
Great work...again 8-) Thank you for your time in this late hour :mrgreen:
Update: tried some tweaking with the mainpage but unfortunately I only got the image loads faster. The links to the details page got disabled.