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
