Kryptronic Software Support Forum

Yes.  All you need to do is include this PHP code at the top of your page:

<?php $this->globals('core.load_fancybox',1); ?>

Then for any image you want to use it on:

<a href="media/path/to/big.jpg" rel="fancybox"><img src="media/path/to/small.jpg" style="display: block;" /></a>

Another question, what would we have to do to add the fancybox functions for showing youtube/other video and iframe content?

The fancyboX is already part of the software, so is there a way we can make full benefit of it?

Last edited by timberguy (02-14-2014 12:28:17)

So far so good other than one thing. I need to find a way to size the fancybox iframe.  I've donated my time to build a website for a veterans memorial, and on the website they will be offering memorial bricks honoring servicemen for the area and the whole country.  I've put together a tool using GD to actually place text on a photo of a brick  while placing an order, but it currently opens in a pop up. Pop ups are usually blocked. I would like to place this in a fancybox iframe call where a pop up blocker would have no effect. 

My problem is, I've tried and tried to find a way to set the size of the iframe, but have failed. It opens white small and the brick creation tool  is not fully displayed.   It would be great if someone could help me figure this one out.

Its actually a tool that lets the end user create the brick. I'll email you a link.  The idea is, that the bricks are limited to the number of lines and characters per line. What I made uses a form that puts the text on the brick real time for the user to see. They can then extract the code string to put in a form field on the webpage that gives us a picture of the brick they created.

I'm just an old sawmill guy that does this by the seat of my pants. Sometimes I get lucky on getting things to work.  What I would love, is if the code would propagate directly from the brick creation tool, into the form, rather than the user having to select and copy it, then pasting it in.  I think what I mad is pretty cool, for an old mill rat. It just isn't all it could be. 
So, the short answer is, that the iframe window is actually and interactive window.

I'll send you a link in your email so you can check it out.

Those are absolutely too cool!

However, I'm afraid that I don't have any funding to do something like that. I wish I did, because I would.  As I said, this if for a veterans memorial that is a 501 c charitable organization, and building the website for them is something I've offered to do. I want to make it the best I can, and using the clickcart software sure gives us a way to do just that.

I guess I'm wondering now, it there is no way to force the iframe window size?

I also should ask on behalf of the memorial, does the Custom Shop ever do any charitable work?

webmaster wrote:

Y

Sorry, we don't do charitable work.  It's hard enough some months...

Never hurts to try.

Could you give me some advie on how to make that code  transfer to the form field? I've tried and tried and can't get it to do that. That is why I "settled" on the copy and paste, which I hate.

I've really prettied up the brick making tool by placing an iframe in a div with a hide show function. it still uses the gd library, but that's how I know how to do it.

In the scripting that creates the brick, there is a php script that I believe writes the string back to the page itself. I'm wondering if this is where the solution lies in getting the string back to the order form rather than the page?  How do I define the page url?  If you look at the page url  it ends in: Item/brick-top-logo { http://www.colemanveteransmemorial.org/ … k-top-logo ) and the form field code seems to be:
<input class="formfield" name="ecom--prodaddtocart--brick-top-logo--brick-code" id="ecom--prodaddtocart--brick-top-logo--brick-code" value="" size="25" type="text">

How do I define what the actual form product option url and field's name is that I want to propagate? 

$(document).ready(function(){
    //PURE PATH TO IMAGE GENERATING PHP FILE
    var base = $(".http,.preview img").attr("src");
   
    //GATHER IMAGE FOR FIRST TIME
    $(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
       
    //KEYUP EVENT AND NEW IMAGE GATHER
    $("#realtime-form input,textarea").stop().keyup(function(){
        $(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());   
    });
       
    //GIVE URL TO USER
    $("#getResults").click(function(){
        $("#resultsUrl").val($(".preview img").attr("src"));
        $("#link").toggle("slow");
    });
   
});

I think the

Last edited by timberguy (02-25-2014 18:24:35)

Okay, I'm brain dead.  Maybe I should not be trying this two days after having a torn retina lasered shut.

I have an html page that appears in the iframe. Within that page there is a form that reacts with a php script that puts the text real time via gd on the image of a brick.:
<form id="realtime-form" action="#" method="post" style="background-color:#ffffff; padding: 2px;" >
<my understanding of this, is that the form action# means the form updates itself?

There is a button that you click once you have the text typed out you want to use that says get my brick code.
That code looks like this:
******************************
<div id="startover"><input type="button" onclick="myFunction()" value="Start Over"></div>
    <button id="getResults">Give me my brick code!</button>
    <div id="link" style="color:#FFFFFF; background-color: #000000; width: 200px; margin: auto; padding: 3px; border-size:1px; border-color:#000000;">Copy the text in the box below and paste this information string in your order form where it says<br><b>"Brick Creation Code"</b></br>
        <input type="text" size="20" value="" id="resultsUrl" onClick="this.select();"/>

    </div>
*********************************
The myFunction simply is a reset button for the form data entered.
The button I.D. getResults apparently points to another php script that contains this:

$(document).ready(function(){
    //PURE PATH TO IMAGE GENERATING PHP FILE
    var base = $(".http,.preview img").attr("src");
   
    //GATHER IMAGE FOR FIRST TIME
    $(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
       
    //KEYUP EVENT AND NEW IMAGE GATHER
    $("#realtime-form input,textarea").stop().keyup(function(){
        $(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());   
    });
       
    //GIVE URL TO USER
    $("#getResults").click(function(){
        $("#resultsUrl")parent.jQuery('#ecom--prodaddtocart--brick-top-logo--brick-code').val('THE NEW VALUE');
        $("#link").toggle("slow");
    });
   
});

*****************************

The way I understand it, is that this script generates the string when you click on the button with the I.D. getResults, updating the text input field with the I.D. "resultsUrl"  and diplaying the div that contains the message that you need to copy this brick code.

Where I can figure out is where to implement the code you gave me, parent.jQuery('#ecom--prodaddtocart--brick-top-logo--brick-code').val('THE NEW VALUE');  so the code goes in the form, and the div simply states that the code has been entered, you may now close the brick creation tool.

Ive tried thinking it out, and putting it several places with no success so far.

Last edited by timberguy (02-26-2014 13:07:18)

Yup, I am.   

Actually, the original code that is in that script it not what I gave you. I gave you my failed attempt.  I  just tried your suggestion and sadly, it didn't work.  The original code looked like this:

$(document).ready(function(){
    //PURE PATH TO IMAGE GENERATING PHP FILE
    var base = $(".http,.preview img").attr("src");
   
    //GATHER IMAGE FOR FIRST TIME
    $(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
       
    //KEYUP EVENT AND NEW IMAGE GATHER
    $("#realtime-form input,textarea").stop().keyup(function(){
        $(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());   
    });
       
    //GIVE URL TO USER
    $("#getResults").click(function(){
        $("#resultsUrl").val($(".preview img").attr("src"));
        $("#link").toggle("slow");
    });
   
});


I'm willing to keep trying over and over on this, as what's a few more thousand tries eh?   But in reality, what would it cost to have the custom shop work out this last bit of coding for me? I could them implement it on the other block pages from this test product.

If your field id on the CCP page is 'text1' then you'd use:

parent.$('#text1').val($('.preview img').attr('src'));

Getting a value into a form field is very simple using jQuery.  Let me break down my last example (with one change):

parent.jQuery('#text1').val($('.preview img').attr('src'));

parent.jQuery = Assuming you want to target the parent window from an iframe, and the parent window uses 'jQuery' to indentify jQuery.

('#text1') = The CSS id for jQuery to look up for the form field.  This is the form field id in the CCP form in the parent window.

.val() = Assign a value to the above.

$('.preview img').attr('src') = In your iframe (where you reference jQuery with '$'), get the src of an image with the class 'preview'.

You should be able to just add this at the end of your script that generates the image and populates the src.  Right after the img src is populated, use this:

parent.jQuery('#ecom--prodaddtocart--test-black--brick-code').val($('.preview img').attr('src'));