Post by max2tall » Wed Mar 13, 2013 7:47 pm

Hi, (using OC 1.5.4.1 & Shoppica 2)

I've made images for size charts & added a link in product description to have it popup on products page.

see e.g. http://www.babyplace.com.sg/ocs/index.p ... uct_id=118

click on 'size chart' & a new window appears ok.

My question is: how do I make the popup show more like a picture than a windows window... without all the browser stuff around it; like the images I see on many sites (but not the 'blanket' effect).

Especially the way the popup goes away when you click on the main page, rather than having to close the new window.

I am not a programmer; is there some way to do it from within the ckeditor?

Thanks :)
Last edited by max2tall on Fri Mar 15, 2013 6:32 pm, edited 1 time in total.

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by yiyinlah » Wed Mar 13, 2013 11:10 pm

Why don't you use this module instead?
http://www.opencart.com/index.php?route ... on_id=9594

It's easier & cleaner I guess ;)

Btw, I'm from SG too! Cheers!

(^_^)

I'm using Opencart 1.5.4.1 & vQmod 2.3.2.


User avatar
Active Member

Posts

Joined
Thu Sep 23, 2010 1:19 pm
Location - Singapore

Post by max2tall » Thu Mar 14, 2013 11:11 am

Hi YY,

& tnx for the thought, but doesn't work in this case.

If you try the link given, you'll see it's quite a few changes to standard Sh2 & product tabs have been removed.

How's your OC shop working out? what's the site?

Cheers.

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by grgr » Thu Mar 14, 2013 4:08 pm

You'll need to put the colorbox code back in to the bottom of the product.tpl or footer.tpl

Code: Select all

$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
and then change the link in the ckeditor to <a class="colorbox" href=".....

-
Image Image Image Image
VIEW ALL EXTENSIONS * EXTENSION SUPPORT * WEBSITE * CUSTOM REQUESTS


User avatar
Active Member

Posts

Joined
Mon Mar 28, 2011 4:08 pm
Location - UK

Post by max2tall » Thu Mar 14, 2013 5:33 pm

Hi & thanks grgr,

do I need to put those code lines inside div things?

I also don't know where in the footer to put, have attached an image of the last few lines of the footer.

also, the "... after href= , does that mean the link to the image file?

sorry for the dumb questions, but I really don't understand this stuff.

Attachments

end of footer.png

end of footer.png (20.81 KiB) Viewed 2983 times


New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by max2tall » Thu Mar 14, 2013 5:51 pm

hi again,

I tried pasting into the bottom of the footer & then looked to see where to change the link in ckeditor, but in all the tabs under edit link, I have no idea where to do it.

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by grgr » Thu Mar 14, 2013 6:39 pm

add to footer:

Code: Select all

<!-- end of FOOTER -->

<script type="text/javascript"><!--
$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
//--></script>

on the ckeditor, click on the 'Source' button

find your link, change from
<a title="show size chart" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=262,left=800,height=212,top=780'); return false;" href="http://www.babyplace.com.sg/ocs/image/d ... 01-009.png">
to
<a class="colorbox href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart</a>

-
Image Image Image Image
VIEW ALL EXTENSIONS * EXTENSION SUPPORT * WEBSITE * CUSTOM REQUESTS


User avatar
Active Member

Posts

Joined
Mon Mar 28, 2011 4:08 pm
Location - UK

Post by max2tall » Thu Mar 14, 2013 7:37 pm

thanks grgr,

I tried it,
but strange things happen to the simple line of code pasted in under source in ckeditor:

I copied & pasted the line you gave, but as soon as it's saved, it turns itself into:

<p><a class="colorbox data-cke-saved-href=" http:="" www.babyplace.com.sg="" ocs="" image="" data="" sizecharts="" BSL001-009.png"="" href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart</p>

& what was "size chart' as a link (when not showing source) became:
<a class="colorbox data-cke-saved-href=" http:="" www.babyplace.com.sg="" ocs="" image="" data="" sizecharts="" BSL001-009.png"="" href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart

gratefut but confused.

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by grgr » Thu Mar 14, 2013 8:28 pm

missing a quote after colorbox:
<a class="colorbox" href="http://www.babyplace.com.sg/ocs/image/d ... .png">Size Chart</a>

-
Image Image Image Image
VIEW ALL EXTENSIONS * EXTENSION SUPPORT * WEBSITE * CUSTOM REQUESTS


User avatar
Active Member

Posts

Joined
Mon Mar 28, 2011 4:08 pm
Location - UK

Post by max2tall » Thu Mar 14, 2013 9:04 pm

'misquoting' huh :)

So we have some progress, but it's coming up as a full new window now,
see http://www.babyplace.com.sg/ocs/index.p ... uct_id=118
your new version is below my hopefully soon to be deleted old version.
How do I make it a small borderless image positioned like my old version & go away all by itself when I click on the main page pls ?
Thanks for holding my hand on this grgr :)

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by grgr » Fri Mar 15, 2013 1:06 am

Can't see the script on the page, but anyway, you probably need to add the following to the header as well:

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />

-
Image Image Image Image
VIEW ALL EXTENSIONS * EXTENSION SUPPORT * WEBSITE * CUSTOM REQUESTS


User avatar
Active Member

Posts

Joined
Mon Mar 28, 2011 4:08 pm
Location - UK

Post by yiyinlah » Fri Mar 15, 2013 1:15 am

Hello dear,

I'm still in the midst of a 2013 revamp! Haha!
Wanna give the best to my customers before re-launching again..
I always set a time aside every year to revamp the webby ;)

Btw hun, another way to work around this is to add the size chart as a picture so customers can just click on the picture to see, instead of putting it in description? I mean this could be the last resort if things can't get working for you.

Cheers!

I'm using Opencart 1.5.4.1 & vQmod 2.3.2.


User avatar
Active Member

Posts

Joined
Thu Sep 23, 2010 1:19 pm
Location - Singapore

Post by max2tall » Fri Mar 15, 2013 10:50 am

Hi grgr

still just makes a new page.

Here's the code added into header.tpl
in header.png

code added to header position - in header.png (10.36 KiB) Viewed 2948 times

here's the ckeditor source view:
descsource1.png

ckeditor source view - descsource1.png (37.24 KiB) Viewed 2948 times

I guess there needs to be some "left=800; etc " type stuff somewhere right? I've no idea how, I've looked around & just get confused.
hope you're still up for this.

@ yinyin: thanks, but no, doing that puts all the ugly tabs & stuff back in again that I took out.

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by max2tall » Fri Mar 15, 2013 11:34 am

update:

totally fedup & given up. What should be a simple thing requires ridiculous amount of programming.

Have taken your idea yinyin after all, by selecting 'images under preview' instead of in separate tab (didn't know I could do that before ;) the job gets done quickly & easily YAY & Thanks :)

& thanks for your efforts grgr :)

New member

Posts

Joined
Fri Sep 28, 2012 4:19 pm

Post by yiyinlah » Sun Mar 17, 2013 1:10 am

Haha sweet! It's neat! (^_^)
And you're very much welcome! hehe.. Check your PM ;)

I'm using Opencart 1.5.4.1 & vQmod 2.3.2.


User avatar
Active Member

Posts

Joined
Thu Sep 23, 2010 1:19 pm
Location - Singapore
Who is online

Users browsing this forum: edkny and 127 guests