Pixelpost

Authentic Photoblog Flavour


Go Back   Pixelpost Forum > SUPPORT / INFORMATION > Pixelpost Help
Reload this Page Effect in images

Post Reply
Page 1 of 3 1 23 >
 
Thread Tools
  #1  
Old 04-06-2008, 10:01 AM
robert1975 Offline
pp regular
  
Join Date: Mar 2008
Posts: 39
Effect in images
Hello, does anybody knows how can I create this effect when pixelpost show an image?(I think is alpha or lightbox effect...)

http://pixelpost.lafaille.ca/index.php?showimage=57

Thanks!
Reply With Quote
  #2  
Old 04-06-2008, 10:08 AM
dhdesign's Avatar
dhdesign Offline
pixelpost guru
  
Join Date: Mar 2007
Location: Ohio
Posts: 431
It's called a fader effect, and you can find out how to incorporate it on your blog from this thread - read post #4 by Vernon Trent.
__________________
My photoblog: KP Images
Reply With Quote
  #3  
Old 04-06-2008, 10:29 AM
robert1975 Offline
pp regular
  
Join Date: Mar 2008
Posts: 39
I think I'm doing correctly, but for some reason it doesn't work!! :-(

Code:
<head>
<title><SITE_TITLE></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="No" />
<meta name="keywords" content="keywords here" />
<meta name="description" content="description here" />
<link href="favicon.png" rel="shortcut icon">
<link rel="alternate" type="application/rss+XML" title="RSS 2.0" href="index.php?x=rss" />
<link rel="stylesheet" type="text/css" href="templates/keoshi/style.css" title="keoshi" />

<script type="text/javascript" src="templates/keoshi/scripts/fader.js"></script>

<script language='javascript' type='text/javascript'>
Reply With Quote
  #4  
Old 04-06-2008, 10:43 AM
dhdesign's Avatar
dhdesign Offline
pixelpost guru
  
Join Date: Mar 2007
Location: Ohio
Posts: 431
A link to your site would be helpful so I could see what the problem might be.
__________________
My photoblog: KP Images
Reply With Quote
  #5  
Old 04-06-2008, 11:05 AM
robert1975 Offline
pp regular
  
Join Date: Mar 2008
Posts: 39
Ohhh, so sorry!!!! This is: http://www.elobturador75.com
or http://www.somoslabanda.com/pixelpost

thank you dhdesign!!
Reply With Quote
  #6  
Old 04-06-2008, 11:57 AM
dhdesign's Avatar
dhdesign Offline
pixelpost guru
  
Join Date: Mar 2007
Location: Ohio
Posts: 431
In looking at your source code, there is one small error that is preventing this from working. You have included the id with the img tag, but you spelled it 'foto' - fader.js is looking for the id 'photo', doesn't find it, so it doesn't execute.

You can fix this changing the id for the img tag in your image_template.html to 'photo':

<img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" />

You'll also need to change the css file for your template for that to #photo so that it will work properly as well.
__________________
My photoblog: KP Images
Reply With Quote
  #7  
Old 04-06-2008, 12:11 PM
robert1975 Offline
pp regular
  
Join Date: Mar 2008
Posts: 39
thank you dhdesing!! Ii works!! But only in firefox, not in ie, do you know why?? (i use ie7)
Reply With Quote
  #8  
Old 04-06-2008, 12:18 PM
robert1975 Offline
pp regular
  
Join Date: Mar 2008
Posts: 39
probably you may need my css? I attach it

/*

design: keoshi.com

visit my photoblog at: www.keoshi.net

*/

body {
background:#101010;
margin:0px;
padding:0px;
text-align:center; font-family:'Lucida Grande', Verdana, Arial, Sans-Serif; color:#FFFFFF; text-decoration:none; font-size:10px
}
#wrapper {
margin:0px auto;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:60px;
text-align:left;
background:black;
border-top:0px;
border-bottom:0px;
border-left:1px solid gray;
border-right:1px solid gray;
}
#photoblogring {
vertical-align:middle;
float:right;
padding:0px;
margin:0px;
}
#photoblogring a {
vertical-align:middle;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
text-decoration:none;
color:#696969;
font-size:10px;
padding:3px;
}
#photoblogring a:hover {
vertical-align:middle;
text-decoration:none;
color:white;
font-size:10px;
background:#444;
padding:3px;
}
#photoblogsnav {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:right;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#333;
}
#photoblogsnav a {
color:#555;
text-decoration:none;
padding:5px;
}
#photoblogsnav a:hover {
color:white;
text-decoration:none;
background:#444;
padding:5px;
}


#photoblogsnav2 {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:right;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:black;
}
#photoblogsnav2 a {
color:#666666;
text-decoration:none;
padding:5px;
}
#photoblogsnav2 a:hover {
color:white;
text-decoration:none;
background:#444;
padding:5px;
}




#publicado {
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:#666666;
font-size:10px;
}

#header {
width:50%;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:20px;
padding-top:5px;
padding-left:0px;
padding-right:0px;
padding-bottom:15px;
text-align:left;
font-size:12px;
font-weight:bold;
color:#333333;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
letter-spacing:-1px;
}
#header a {
text-align:left;
font-size:30px;
font-weight:bold;
color:#333333;
font-family: sans-serif;
letter-spacing:-1px; text-decoration:none

}
#photo {
border:none;
}
#image {
margin:0px auto;
padding:0px;
text-align:left;
}
#image img {
border:none;
}
#imageinfo {
text-align:left;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:Verdana, Arial, Sans-Serif;
color:#D3D3D3;
font-size:16px;
font-weight:bold;
letter-spacing:-1px;
text-transform:uppercase;
}

#imageinfo2 {
text-align:left;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
font-weight:bold;
letter-spacing:-1px;



}

#imagenotes {
text-align:left;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:#696969;
font-size:10px;
letter-spacing:-1px

}

#links ul {
list-style-type:square;
margin:0px;
padding:10px;
}
#links li {
margin:0px;
}
#links li a {
display:block;
margin:0px;
color:#fff;
text-decoration:none;
padding:3px;
}
#links li a:hover {
background:#333;
}
#links {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#444;
}

#referers ul {
list-style-type:square;
margin:0px;
padding:10px;
}
#referers li {
margin:0px;
}
#referers li a {
display:block;
margin:0px;
color:#fff;
text-decoration:none;
padding:3px;
}
#referers li a:hover {
background:#333;
}
#referers {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#444;
}

#about {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#444;
}
#about img {
border:1px solid #444;
float:right;
}
#about a {
color:white;
}

#sitenav {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#333;
}


#sitenav a {
color:white;
text-decoration:none;
padding:5px;
}
#sitenav a:hover {
color:white;
text-decoration:none;
background:#444;
padding:5px;
}
.last_comment {
float:right;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:9px;
text-decoration:none;
padding:1px;
background:#333;
}
:hover.last_comment {
text-decoration:none;
background:#444;
padding:1px;
}

#comments {
border-top:1px solid #444444;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:25px;
padding-right:30px;
padding-bottom:25px;
padding-left:30px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:#FFFFFF;
font-size:10px;
background:#333333;; border-left-width:0px; border-right-width:0px; border-bottom-width:0px
}

#comments ul li {
border-top:1px solid #444444;
margin-bottom:15px;
}

#comments a {
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
text-decoration:none;
}
#comments a:hover {
text-decoration:none;
background:#5F5F5F;
}

#comment {
border-top:0px
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:15px;
padding-bottom:5px;
padding-left:15px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#333;
}
:hover#comment {
text-decoration:none;
background:#414141;
}
#comment a {
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
text-decoration:none;
}
#comment a:hover {
text-decoration:none;
background:#5F5F5F;
}
#comments textarea {
width:100%;
height:50px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size:10px;
font-weight:bold;
border:1px solid #444;
background-color:#333;
color:#D3D3D3;
}

.input {
width:100%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size:10px;
font-weight:bold;
border:1px solid #444;
background-color:#333;
color:#D3D3D3;
}

#imagenavigation {
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#333;
}

#imagenavigation2 {

text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#333;
}

#imagenavigation a {
color:white;
text-decoration:none;
padding:5px;
}
#imagenavigation a:hover {
color:white;
text-decoration:none;
background:#444;
padding:5px;
}
.notice {width:50%;border:1px dotted #cdcdcd;color:red;margin-bottom:10px;padding:5px;}
.hidden {color:#333;}



#photoblogsnav33 {
border-top:1px solid #444;
border-left:0px;
border-right:0px;
border-bottom:0px;
text-align:left;
margin-left:0px;
margin-top:0px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:20px;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
color:white;
font-size:10px;
background:#333;
}
#photoblogsnav33 a {
color:white;
text-decoration:none;

}
#photoblogsnav33 a:hover {
color:white;
text-decoration:none;
background:#444;

}


/* enjoy! */
Reply With Quote
  #9  
Old 04-06-2008, 12:20 PM
robert1975 Offline
pp regular
  
Join Date: Mar 2008
Posts: 39
and maybe the rest of my <head>?

Here is:

<head>
<title><SITE_TITLE></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="No" />
<meta name="keywords" content="keywords here" />
<meta name="description" content="description here" />
<link href="favicon.png" rel="shortcut icon">
<link rel="alternate" type="application/rss+XML" title="RSS 2.0" href="index.php?x=rss" />
<link rel="stylesheet" type="text/css" href="templates/keoshi/style.css" title="keoshi" />

<script type="text/javascript" src="templates/keoshi/jscript/fader.js"></script>

<script language='javascript' type='text/javascript'>
<!-- BEGIN
function flip(rid)
{
current=(document.getElementById(rid).style.displa y == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
// End -->
</script>



<style type="text/css">
#wrapper {
width:<IMAGE_WIDTH>px;
}
.Estilo1 {color: #FFFF00}
</style>

</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-784180-5");
pageTracker._initData();
pageTracker._trackPageview();
</script>

</head>
Reply With Quote
  #10  
Old 04-06-2008, 12:23 PM
dhdesign's Avatar
dhdesign Offline
pixelpost guru
  
Join Date: Mar 2007
Location: Ohio
Posts: 431
It works fine on my photoblog, but I have the script call directly before the image tag, rather than in the head section of the template.

Try moving the code (<script type="text/javascript" src="templates/keoshi/jscript/fader.js"></script>) to the line directly before the img tag.

Also, you have no width or height associated with your images, and IE won't display them without it. Change the img tag to <img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" /> to fix that issue.
__________________
My photoblog: KP Images
Reply With Quote
Post Reply
Page 1 of 3 1 23 >

« Previous Thread | Next Thread »

Thread Tools




All times are GMT. The time now is 03:48 AM.

Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd. | Style Design: d3 designs