• [Mod] Image Overlay Text 3 0 5 1
Currently:  

Author Topic: [Mod] Image Overlay Text  (Read 10027 times)

0 Members and 1 Guest are viewing this topic.

Offline sathishIPL

  • Jr. Member
  • **
  • Posts: 54
    • View Profile
[Mod] Image Overlay Text
« 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





Rembrandt

  • Guest

Offline sathishIPL

  • Jr. Member
  • **
  • Posts: 54
    • View Profile
Re: [Mod] Image Overlay Text
« Reply #2 on: May 15, 2011, 08:40:21 PM »
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

Offline batu544

  • Sr. Member
  • ****
  • Posts: 336
    • View Profile
    • Free Celebrity wallpapers
Re: [Mod] Image Overlay Text
« Reply #3 on: May 23, 2011, 09:45:11 AM »
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..


Offline Crazymodder

  • Jr. Member
  • **
  • Posts: 57
    • View Profile
Re: [Mod] Image Overlay Text
« Reply #4 on: May 24, 2011, 07:24:17 PM »
Should it be overlayed all the time or be closeable? Or only on hover status it should be shown?

Offline sathishIPL

  • Jr. Member
  • **
  • Posts: 54
    • View Profile
Re: [Mod] Image Overlay Text
« Reply #5 on: May 26, 2011, 05:50:48 AM »
Hi Thanks for the reply,

It should be like youtube ,only dynamic text ads.

Offline sathishIPL

  • Jr. Member
  • **
  • Posts: 54
    • View Profile
Re: [Mod] Image Overlay Text
« Reply #6 on: July 23, 2011, 09:59:07 AM »
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.
Code: [Select]
<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:
Code: [Select]
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:
Code: [Select]
{image}replace with the below one:
Code: [Select]
{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
« Last Edit: July 23, 2011, 05:06:29 PM by Rembrandt »

Rembrandt

  • Guest
Re: [Mod] Image Overlay Text
« Reply #7 on: July 23, 2011, 04:42:19 PM »
Thank you for sharing this Mod!

mfg Andi