4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: sathishIPL on May 14, 2011, 04:58:13 PM
-
Hi all,
I am new to 4images and trying to add text ad on images, kindly help me on this.
Thank You......!
Best Regards,
SathishKumar
-
[TUT] Zusätzliches Image Feld anlegen / Additional Image (http://www.4homepages.de/forum/index.php?topic=20748.msg112976#msg112976)
mfg Andi
-
Hi thanks for your reply..but u have misunderstood my context...i need to display advertisement on images like youtube....
Need some suggestions and tips.i think it should be handled as watermark? ..
Thanks
br,satz
-
It can be done my using some jquery and css .. I have done it long back .. will post it if I will find it in my old hard drive..
-
Should it be overlayed all the time or be closeable? Or only on hover status it should be shown?
-
Hi Thanks for the reply,
It should be like youtube ,only dynamic text ads.
-
finally i have done this modifications for me and i want to share . i am newbie to 4images and php .
So please backup your files before do modifications.
About mod:: Image Overlay Text or images ads ,fully controllable thro admin.
@Developers==> if you find any mistakes please correct it
1.) open admin/settings.php find:
show_form_footer($lang['save_changes'], "", 2);
insert above code:
show_table_separator($setting_group[8], 2, "setting_group_8");
show_setting_row("is_ads","radio");
show_setting_row("display_ads","textarea");
2.) find lang/english/admin.php "?>" add before:
/*-- Setting-Group 8 --*/
$setting_group[8]="Ads";
$setting['is_ads']="Want to display ads?";
$setting['display_ads']="HTML to place the ads over Image";
3.) find in details.php:
$site_template->register_vars("comment_form", $comment_form);
unset($comment_form);
} // end if allow_comments
add After:
// mod ads
$ads="";
if($config['is_ads']){
$site_template->register_vars(array(
"ads" => $ads,
"display_ads" => $config['display_ads'],
));
$ads = $site_template->parse_template("ads");
$site_template->register_vars("ads", $ads);
unset($ads);
}
// mod ad
4.) create a new folder in your root and call it "js", copy the "jquery.min.js" from attachment in the new "js" folder.
4.1) open templates/yourtemplates/header.html and place the below code in between <head> </head> tag.
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('div.wrapper').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
});
</script>
5.) Open Templates\yourtemplates\style.css and place the below code at the end:
div.wrapper{
position:relative; /* important(so we can absolutely position the description div */
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it
/* styling bellow */
background-color:black;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:15px;
color:red;
}
div.description_content{
padding:10px;
}
6.) goto templates/yourtemplates/details.html find:
{image}replace with the below one:
{if ads}
{ads}
{endif ads}
{ifno ads}
{image}
{endifno ads}
download the attached ads.html
and place it in templates/yourtemplates/ads.html
screenshots ==> when the mouse point the image,then the ad will be displayed
-
Thank you for sharing this Mod!
mfg Andi