I print Javascript functions to open bottom log area by a PHP script. This crashes non-dom scripts like Ajax, Excel generation etc. is there a server side dom function like isDom() in PHP?
Current Script:
if (System::$isDebug == 1 && self::$_registeredJsFunctions == false)
$this->registerJsFunctions();
registerJsFunction:
protected function registerJsFunctions() {
self::$_registeredJsFunctions = true;
echo <<<EOD
<script type="text/javascript">
function printSystemLog(msg) {
if (!document.getElementById('ie-log')) {
$(document.body).append('<style type="text/css">'
+ '#ie-log { z-index:9999 !important; position:fixed; bottom:0; border-top: double 2px #939399; background:none #FDFDF0;width:100%;font-size:11px; font-family: "Courier New", Courier, monospace;overflow:hidden;}'
+ '#ie-log #debug-level { position: absolute; height: 25px; right:0px; top:0; width: auto; background:#ECF1EF; padding: 2px; color:#8B8378; z-index:9999;border: double 2px #939399;border-top: none;}'
+ '#ie-log #larea{ height:180px;padding:3px;overflow-y:scroll !important; overflow-x:hidden !important; }'
+ '#ie-log #lclose{ margin-left: 16px;}'
+ '#ie-log h3 { margin: 8px 5px; }'
+ '#ie-log #lclose a { padding: 3px; padding-left:17px; background:url(theme/standart/images/delete.png) left center no-repeat; color:inherit;}'
+ '#ie-log #lclose a:hover { background-color:#F1EDC2; text-decoration:none; color: #8B6914;}'
+ '#larea div.log-row { position:relative; margin: 3px 10px; border-bottom: solid thin #C4C49C; margin-left:20px; overflow: visible !important; }'
+ '#larea div.log-row span.arrright {position:absolute; height:16px; left: -20px; display:inline-block; width:16px; background: transparent url(theme/standart/images/arrow_right.png) left center no-repeat;} '
+ '</style>');
$(document.body).append('<div id="ie-log"><h3>Sistemin Anlık Log Görüntüsü</h3><div id="debug-level"><span>Seviye: <select onchange="logFilter(this.value)"><option value="">Hepsi</option><option value="EMERG">Emergency</option><option value="ALERT">Alert</option><option value="CRIT">Critical</option><option value="ERR">Error</option><option value="WARN">Warning</option><option value="NOTICE">Notice</option><option value="INFO">İnformation</option><option value="DEBUG">Debug</option></select></span><span id="lclose">Kapat</span></div><div id="larea"></div></div>');
if (getCookie('TASARIMICI_LOG_SEVMEZ') == 1)
$('#ie-log').hide();
}
$('#larea').prepend('<div class="log-row"><span class="arrright"></span>'+msg + '</div>');
}
</script>
EOD;
}
Related
I am making a flipster slider where people can give reviews about a company. But the text is flowing outside of the div. I tried numerous things but I cant get it to work like I want it. This is what I have:
https://imgur.com/dfLlUSg
and this is what I want:
https://imgur.com/f61MFCf
I am using the Advanced Custom Fields Repeater field.
Also, the two lines of text (above the picture) does not have any whitespaces, I don't know why.
This is how its built:
https://imgur.com/MX49WWB
can anyone help me with this?
This is some extra SCSS:
.flipster {
//margin-top: 75px;
ul {
height: 483px !important;
margin-top: 5px;
.flipster__item--current article {
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.2);
}
li {
&.flipster__item--future {
.flipster__item__content {
//transform: rotate(0) !important;
}
}
&.flipster__item--past {
.flipster__item__content {
//transform: rotate(0) !important;
}
}
article,
.flipster article {
padding: 45px;
width: 460px;
margin: 10px auto;
height: 460px;
background: #fff;
box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, .1);
.quote {
text-align: center;
p {
font-size: 32px;
text-align: center;
}
}
.quote-persoon {
p {
font-size: 18px;
color: $oranje;
text-align: center;
padding: 35px 0 5px 0;
display: block;
}
span {
font-size: 16px;
width: 100%;
display: block;
text-align: center;
}
img {
margin: 35px auto 0 auto;
display: block;
border-radius: 75px;
}
}
}
}
}
.flipster__button {
opacity: 1;
svg {
color: $oranje;
}
}
}
When I reload the page, I can see it is all inside the div how it should be but then it just quickly jumps out
I found the problem. it was in the ul.flipster__container. there was a css line: white-space: nowrap;
no idea why that would be of any use
#charset "UTF-8";
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
h1 {
color: #00ff00;
}
p {
background-color: transparent;
color: #ffffff;
}
div
{
color: #00cc00;
}
div #controls
{
color: red;
}
div a
{
color: #00cc00;
}
div a:active {
color: #00cc00;
}
div a:hover {
color: #F58100;
}
<!--/MAIN PANEL/-->
#parent {
width:400px;
}
#controls, #monitor {
float:left;
margin-top:0px;
padding-below:200px;
height:400px;
width:50%;
border:1px;
display:inline-block;
solid rgba(0,0,0,1);
text-align:center;
}
<!--/CONTENT AND CONTROLS/-->
#detail {
width:320px;
height:180px;
margin-bottom:12px;
border: 1px solid #000000;
}
h1text {
color: #fb667a;
font-size: 16px;
font-weight: bold;
float:left;
width:159px;
white-space:pre-wrap;
background: transparent;
}
.year {
float:left;
background: transparent;
}
img {
margin-bottom: 5px;
background:#fff;
cursor:pointer;
transform: scale(1);
-moz-box-shadow: 0px 1px 5px 0px #00cc00;
-webkit-box-shadow: 0px 1px 5px 0px #00cc00;
box-shadow: 0px 1px 5px 0px #00cc00;
}
img:hover {
opacity: 0.5;
cursor:pointer;
transform: scale(1);
visibility:visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index:100;
transition-timing-function:cubic-bezier(0.5, 0, 0.1, 1);
transition-duration:400ms;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#detail div {
position:relative;
width:100%;
height:100%;
}
#detail div img {
position: absolute;
top: 0;
left:0;
width:100%;
height: 400px;
z-index:1;
}
#detail div span {
color:#ffffff;
position:absolute;
margin
bottom:0;
right:0;
text-align:center;
width:100%;
background: #00cc00;
opacity: .8;
z-index:2;
}
#detail div span2 {
color:#ffffff;
position:absolute;
top:200px;
right:10px;
text-align:center;
width:50%;
height:200px;
background: #F58100;
opacity: .8;
z-index:10;
}
#links img {
width:10%;
height:30%;
margin-left:16px;
margin-top:100px;
}
<!--/SLIDER/-->
.track {
position: absolute;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
border: 0;
width: 2000px;
}
.book {
float: left;
margin: 0;
margin-right: 10px;
padding: 0;
border: 0;
width: 150px;
height: 150px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
.book:hover {
opacity: 0.5;
}
.book:nth-child(1) {
background-color: #ff0000;
}
.book:nth-child(2) {
background-color: #ffaa00;
}
.book:nth-child(3) {
background-color: #ffff00;
}
.book:nth-child(4) {
background-color: #00ff00;
}
.book:nth-child(5) {
background-color: #0000ff;
}
.book:nth-child(6) {
background-color: #aa00ff;
}
.book:nth-child(7) {
background-color: #ff00ff;
}
.left, .right {
position: absolute;
color: white;
font-size: 48px;
top: 57px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
<?php
//database connection
$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'pixbeans';
/* 1) mysqli and mysqli result objects */
//$mysqli is object of mysqli class
$mysqli = new mysqli($host,$user,$pass,$db);
//print_r($mysqli);die;
//call query method of $mysqli object
$result = $mysqli->query
//SELECT queries are always return as mysqli result objects
("SELECT * FROM movies WHERE year BETWEEN 2000 AND 2016 ORDER BY rand() LIMIT 20")
or die($mysqli->error);
?>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixBeans - Original Black TV Series</title>
<meta name="author" content="Antonio James">
<link rel="shortcut icon" href="assets/Icons/pixBeans icon.png">
<link href="tabpan.css" rel="stylesheet" type="text/css">
</head>
<style>*{margin: 0px; padding: 0px; background-color:black;}</style>
<body>
<div id="main-wrapper">
<div id="moviesbox" style="display:inline-block;">
<?php while ($movie = $result->fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
</div>
<?php endwhile; ?>
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="javascript/tabpan.js"></script>
<script src="javascript/imgjump.js"></script>
<script src="javascript/imgslider.js"></script>
</body>
</html>
I am trying to make all my images display on one horizontal line/row that can be scrolled left or right. However, no matter what I do I cannot seem to make the images quit wrapping to the next line. They are responsive so if i make the screen small 2 images will appear and the rest wraps to a new line. If i make full screen several images appear and the other 15 wrap accordingly. However, I want them to stay on one line. I dont care if the overflow is hidden or if the overflow scrolls in from off the page, I just want them to quit wrapping.
Here is what the site looks like right now:
screen shot. I made the parent div"moviesbox" dark grey so that you can see how far the div extends and I am using light grey to show the div area.
Here is the code that I am using to generate the images into the divs:
<div id="moviesbox" style="display:inline-block;">
fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
Here is the CSS I am using. I PREFER TO USE CSS but if not, i'm open to other fixes.
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
THanks.
Folowing this tutorial i try to implement on my app based on ZendFramework 2.
I create all what author say and when i test image is successfull uploaded and alias is saved in database. But problem is ajax not show reposition after uploading and not show image. I must refresh browser to see new image.
My code:
<script>
$(document).ready(function()
{
/* Uploading Profile BackGround Image */
$('body').on('change','#bgphotoimg', function()
{
$("#bgimageform").ajaxForm({target: '#timelineBackground',
beforeSubmit:function(){},
success:function(){
$("#timelineShade").hide();
$("#bgimageform").hide();
},
error:function(){
} }).submit();
});
/* Banner position drag */
$("body").on('mouseover','.headerimage',function ()
{
var y1 = $('#timelineBackground').height();
var y2 = $('.headerimage').height();
$(this).draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui)
{
}
});
});
/* Bannert Position Save*/
$("body").on('click','.bgSave',function ()
{
var id = $(this).attr("id");
var p = $("#timelineBGload").attr("style");
var Y =p.split("top:");
var Z=Y[1].split(";");
var dataString ='position='+Z[0];
$.ajax({
type: "POST",
url: "image_saveBG_ajax_bg.php",
data: dataString,
cache: false,
beforeSend: function(){ },
success: function(html)
{
if(html)
{
$(".bgImage").fadeOut('slow');
$(".bgSave").fadeOut('slow');
$("#timelineShade").fadeIn("slow");
$("#timelineBGload").removeClass("headerimage");
$("#timelineBGload").css({'margin-top':html});
return false;
}
}
});
return false;
});
});
</script>
#timelineBackground {
height: 315px;
position: relative;
margin-top: -20px;
overflow: hidden;
background-color:#ccc;
}
#timelineProfilePic {
width: 170px;
height: 170px;
background-color: #ffffff;
position: absolute;
margin-top: -145px;
margin-left: 20px;
z-index: 1000;
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#timelineTitle {
color: #ffffff;
font-size: 24px;
margin-top: -45px;
position: absolute;
margin-left: 206px;
font-weight: bold;
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0,0,0,.8);
z-index: 999;
text-transform: capitalize;
}
#timelineShade {
min-height: 95px;
position: absolute;
margin-top: -95px;
width: 100%;
}
#timelineNav {
background-color: #ffffff;
min-height: 43px;
margin-bottom: 10px;
position: relative;
}
.timelineUploadBG {
position: absolute;
margin-top: 50px;
margin-left: 813px;
height: 32px;
width: 32px;
}
.uploadFile {
background: url('../images/whitecam.png') no-repeat;
height: 32px;
width: 32px;
overflow: hidden;
cursor: pointer;
}
.uploadFile input {
filter: alpha(opacity=0);
opacity: 0;
margin-left: -110px;
}
.custom-file-input {
height: 25px;
cursor: pointer;
}
.bgImage,#timelineBGload
{
width:100%;
}
.headerimage {
cursor: s-resize;
position: absolute;
}
.wallbutton:hover {
text-decoration: none;
}
.blackButton {
background-color: #666666;
border-color: #333333;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
<div class="image">
<div class="cover-img">
<div id="timelineBackground">
<?php if($cover = getCoverPicture($profile->account_id)): ?>
<?php $cover_image_path = upload_userdata_url() .'/'. $cover->account_id .'/'.'photos/'.$cover->photo_guid .'/'. $cover->photo_name;?>
<img style="margin-top: <?= $cover->photo_bg_position; ?>" class="bgImage" src="<?= $cover_image_path; ?>">
<?php endif; ?>
</div>
<div id="timelineShade" style="">
<form action="photo/uploadCoverPicture" enctype="multipart/form-data" method="post" id="bgimageform">
<div class="uploadFile timelineUploadBG">
<input type="file" original-title="Change Cover Picture" class=" custom-file-input" id="bgphotoimg" name="userfile">
</div>
</form>
</div>
</div>
</div>
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I want to reproduce YouTube's "Show More" functionality on my site. Below each video, there's a "Show More" link. If you click on that link, it moves down, and some previously-hidden text is shown. How can I do this?
A CSS-only version I just did: http://dabblet.com/gist/3157489
It works in Chrome, Firefox, Safari, Opera, IE9+. Show/ hide is functional in IE9, though transitions are missing (gradient fade is emulated using an additional element).
The HTML structure is something like:
<div class="info-wrapper">
<input type="checkbox" id="showhide">
<label for="showhide">
<div class="more">Show more</div>
<div>Show less</div>
</label>
<div class="info">
<p><!-- text, text, more text --></p>
<!--[if lte IE 9]><div class="aftershadow"></div><![endif]-->
</div>
</div>
The CSS:
body {
background: #ccc;
}
.info-wrapper {
height: auto;
width: 500px;
margin: 4em auto;
padding: 0 0 2em 0;
position: relative;
}
.info {
max-height: 120px;
height: auto;
padding: .5em 0;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
overflow: hidden;
position: relative;
transition: 1s;
}
p { margin: 1em; }
.info:after, .aftershadow {
bottom: 0;
width: 100%;
height: 3em;
border-radius: 0 0 1em 1em;
position: absolute;
background: linear-gradient(rgba(192,192,192,0), #ccc);
content: '';
}
.aftershadow {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
}
.info-wrapper input[type=checkbox] {
display: none;
}
.info-wrapper label {
left: 50%;
bottom: 1.5em;
width: 9em;
height: 1.25em;
margin: 0 0 0 -2.5em;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
overflow: hidden;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
.info-wrapper label .more { margin: -.1em 0 .35em; transition: 1s; }
.info-wrapper input[type=checkbox]:checked ~ .info {
max-height: 15em;
}
.info-wrapper input[type=checkbox]:checked + label .more {
margin-top: -1.65em;
}
The idea is the following: in the HTML structure, you have a checkbox which is hidden, but can be checked/ unchecked by clicking its label.
Initially, the info is compacted and the checkbox is unchecked. Clicking on "Show more" (which is inside the label) ticks the checkbox and you can now change the style of the elements that are its siblings and come after it in the HTML (the label and the .info in this case) using the :checked pseudo-class and the the general sibling selector.
This is the part that does it:
.info-wrapper input[type=checkbox]:checked ~ .info {
max-height: 15em;
}
.info-wrapper input[type=checkbox]:checked + label .more {
margin-top: -1.65em;
}
Another method that would also work in IE8 would be to use links and their :focus/ :active pseudo-classes instead of a checkbox and its :checked pseudo-class. The disadvantage of this method is that as soon as you click anywhere else in the page, the .info gets compacted again.
Demo: http://jsfiddle.net/thebabydino/U7Cyk/
HTML doesn't change much, I'm just replacing the checkbox and the label with two links
<div class="info-wrapper">
Show more
Show less
<div class="info">
<p><!--stuff, not wasting space here with it--></p>
<!--[if lte IE 9]><div class="aftershadow"></div><![endif]-->
</div>
</div>
The CSS is mostly the same. Everything related to input & label is out and instead there is:
.info-wrapper a {
left: 50%;
bottom: 1.5em;
width: 9em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
display: block;
overflow: hidden;
position: absolute;
color: #000;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
transition: 1s;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less {
margin-top: -1.5em;
opacity : 0;
z-index: -1;
}
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: 15em;
}
.info-wrapper .less:focus ~ .info,
.info-wrapper .less:active ~ .info {
max-height: 120px;
}
.info-wrapper .more:focus,
.info-wrapper .more:active {
opacity: 0;
}
.info-wrapper .more:focus + .less,
.info-wrapper .more:active + .less {
opacity: 1;
z-index: 1;
}
Using jQuery - demo http://jsfiddle.net/thebabydino/yDfTq/
$('.more').click(function(){
$(this).animate({'opacity': '0'}, 1000);
$('.less').animate({
'opacity': '1',
'z-index': '1'
}, 1000);
$('.info').animate({'height': '15em'}, 1000);
});
$('.less').click(function(){
$(this).animate({
'opacity': '0',
'z-index': '-1'
}, 1000);
$('.more').animate({'opacity': '1'}, 1000);
$('.info').animate({'height': '120px'}, 1000);
});
The HTML is the same and the CSS is also mostly the same:
.info {
height: 120px;
padding: .5em 0;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
overflow: hidden;
position: relative;
}
p { margin: 1em; }
.info:after, .aftershadow {
bottom: 0;
width: 100%;
height: 3em;
border-radius: 0 0 1em 1em;
position: absolute;
background: linear-gradient(rgba(192,192,192,0), #ccc);
content: '';
}
.aftershadow {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
width: 9em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
border-bottom: solid 1px #fff;
border-radius: 0 0 1em 1em;
display: block;
overflow: hidden;
position: absolute;
color: #000;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { margin-top: -1.5em; opacity: 0; z-index: -1; }
One of the tags indicates you're willing to use jQuery. The following link explains how this effect can be achieved with slideToggle. The style of the div or other element should be set display: none; if you want it to be hidden on the first page load.
http://www.mkyong.com/jquery/jquery-slideup-slidedown-and-slidetoggle-example/
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
Official documentation: http://api.jquery.com/slideToggle/
I got this code which address my "Get the 1st image of the post then display it" issue.
<?php echo get_first_image() ?>
My problem is, how to i make it to automatically adjust its size (lets say 50x50) then display it.
What i want to to do is simply get the image from my published post, resize it (50x50 and 250x250) then display it. It will be use in a slider/enhance version of recent post.
thank you very much!
HERES THE CODE of the SLIDER/Recent post
$(".main_image .desc").show();
$(".main_image .block").animate({ opacity: 0.85 }, 1 );
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt");
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
//Animate the Description
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
//Show active list-item
$(".image_thumb ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$("a.collapse").click(function(){
$(".main_banner .block").slideToggle();
$("a.collapse").toggleClass("show");
});
<div class="main_image">
<img src="banner1.jpg" alt="" />
<div class="desc">
Close Me!
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li>
<img src="image\banner1_thumb.jpg" alt="image1234" />
<div class="block">
<h2>Title</h2>
<small>Date</small>
<p>Copy</p>
</div>
</li>
</ul>
</div>
.main_image {
width: 598px;
height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding: 10px;
}
.main_image p {
font-size: 1.2em;
line-height: 1.6em;
padding: 10px;
margin: 0;
}
.block small {
font-size: 1em;
padding: 0 0 0 20px;
background: url(iconcalendarKO.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: none;
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.main_image a.show {background-position: left bottom;}image_thumb section CSS
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0;
padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0;
padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0 url(nav123_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0;
padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}
isnt get_the_post_thumbnail enough?
Just call it twice, with different sizes