Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I would like to use AI pro to replace the logo image on the page within the iframe.

Can you let me know the best way to achieve this, with and without the external workaround? Please respond with clear and simple steps. thank you.

Without the external workaround I have a demo which does this exactly:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/hide-a-part-of-the-iframe#e9

If you are able to use the external workaround I cannot give you a working example because it depends how your page does look like. So can the image replaced with css or does the old one needs to be hidden and your be added somehow.

Using the external workaround is always the better option because you really replace it in the page and not only place you logo over the existing ones with the restrictions I describe on the demo page.

Best, Michael

Michael,

Thanks for the quick reply.

Regarding the external workaround, I'm not a css expert so I am hacking my way thru this process to prove it can work before I get an expert to code it.

By using the external workaround, can I change an image reference in the iframe page html or does the image reference need to be included in the iframed site's css file?

Depending on the answer to the previous question, what would i need to do to override the original image reference using the plug-in?

Attached image demonstrates what I am trying to do.

I would like to know what I need to do with AI pro to get it to work.

Thank you.

you can see how this can be done with css here:

https://css-tricks.com/replace-the-image-in-an-img-with-css/

a.x-brand img {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}

So you only need to replace the image url and the size of the images.

You have to choices to include this:

create a css file, piut the content there and include the url on the "Add include/files" at -> Additional css in iframe

Or you add the styles on the advanced tab at "Modify the iframe" ->
Content id in iframe: a.x-brand img
Content styles in iframe: display: block; + the stuff above separated by ;

Best, Michael

Michael,

Thank you for the help, the first choice worked perfectly.

One additional question, If use the second choice do I need the external workaround file?

both solution need this. the first one is an external css file I include
the 2nd modify the css dynamically.

Best, Michael