putting button inside code - php

My working code outputs all the images in my wordpress post and puts the last image as the background of #last-img which is the last image shown.
I'm trying to place a button inside my code which appears inside the #last-img. I can't put it outside the code since when I tried when I use absolute positioning it uses all the images as a reference point
my code
<?php
preg_match_all('/(<img [^>]*>)/', get_the_content(), $images);
preg_match_all('/src="([^"]*)"/i', get_the_content(), $images1);
$count = count($images[1]);
$count1 = count($images1[1]);
foreach($images[1] as $k=> $img){
if($k == $count-1){
$format = '<div id="last-img" style="background:url(%s)"> ... </div>'; // Or $format = "<div id='last-img' style='background:url(%s)'> ... </div>";
$image = $images1[1][$count1-1];
echo sprintf($format,$image);
}else{
echo $img;
}
}
?>
link code
<div id="top-btn">
<div id="top-rotate"></div>
</div>
css
#top-btn {
display: block;
position: absolute;
z-index: 200;
right: 0; left: 0; bottom: 0;
margin: 0 auto;
height: 60px; width: 60px;
}

Related

CSS: First row of image gallery coming out diagonal?

I have an array of images in php that I am trying to display as a gallery. It is working pretty well, except that the first row of the gallery comes out diagonal, with each image slightly below the one before it.
Here is the code I am using:
CSS
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
display: inline;
width:180px;
height:180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
max-height:100%;
max-width:100%;
margin:0 auto;
}
HTML/PHP
<div class="gallery-container">
<?php
$count = 0;
foreach($images as $image) {
echo "<div class='gallery'><a href=''><img src='".$dir.$image."'/></a></div>"; //$dir is the path to the image
if(count % 4 == 0) {
echo "<br>";
}
$count = $count + 1;
}
?>
</div>
Here is a screenshot of the result on the first row:
All the other rows come out fine. Thank you very much for any help.
If you want to do it using float, you would better do that like this:
CSS
.gallery{
margin: 5px;
border: 1px solid #ccc;
float: left;
display: block;
width:180px;
height:180px;
}
.gallery.clear-left{
clear: left;
}
PHP/HTML
<div class="gallery-container">
<?php
$count = 0;
foreach( $images as $image ){?>
<div class="gallery <?php echo( 0 == $count % 4 ? 'clear-left' : '' );?>">
<a href="">
<img src="<?php echo $dir.$image;?>">
</a>
</div>
<?php
$count++;
}
?>
</div>
But there is an even better solution to this, called flex:
Instead of br element render "clear" div
<div style="clear:both"></div>
Have you tried starting the count at 1 instead of 0?
Checkout the resulting html. It is likely that you count is off and the br is being put to the dom too often. This fiddle shows that your desired html and css should work.
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<br>
Though, I would consider not using the br, but instead using a containing div:
like this

Div is not rigged onto image and text is not centered properly?

I have a main Div which is the "master" of all divs. This div's width is 70% of the page. Inside this div, is another div that contains an image. This div is called mainImg. It is set to absolute positioning and all the rest of the elements are set to absolute as well. All these elements move absolutely relative to the main div.
Here's my code:
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
if ($id <= 3)
{
$images = $rows["image"];
$title = $rows["title"];
echo "<div id=main>";
if ($id == 1)
{
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "</div>";
}
}
}?>
CSS
body{
position: relative;
}
#main{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
#mainImg{
position: absolute;
width: 65%;
}
#mainImg img{
width: 100%;
}
#mainTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 0%;
background-color: rgba(100, 0, 0, 0.7);
}
#mainTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 120%;
}
My problem that I am facing is that the div inside of mainImg (mainTitle), is not properly rigged inside the image. The div is a semi-transparent block that should fit perfectly on the bottom of the image with 25% height. Instead, the block is coming out of the image a bit. The other problem that I am facing is my text inside this mainTitle div. The text is centered, but not aligned in the middle of the div. I am trying to make the text responsive, with percentages, but whenever I resize the text always goes below the div. How do I fix these three problems? (Rigging the div properly, aligning the text, and keeping the text inside the div at all times for other window sizes?
The semi-transparent div is coming off the edge of the image
When browser is resized, this is what happens to the text
<?php
$res = $db->query("SELECT * FROM Articles");
if( $res->num_rows > 0 ) {
echo "<div id='main'>";/* Open main div outside the loop */
while( $rows = $res->fetch_object() ) {
$id = $rows->id;
if ( $id <= 3 ) {
$image = $rows->image;
$title = $rows->title;
if ( $id == 1 ) {
echo "
<div id='mainImg'>
<img src='$image'>
<div id='mainTitle'>
<h2>$title</h2>
</div>
</div>";
}
}
}
echo '</div>';/* close main div */
}
?>

Footer not showing the way I would like to

So, I've been trying for some time now to figure out how to position a footer correctly. I was browsing some already-asked questions here on SO and I found some ideas which I implemented but that didn't make my footer to work.
Here is the basic explanation. I have bellow written code for my footer. The problem is that the footer "fly" in page if post is not long. I'm coding (better say rewritting) a simple CMS from C to PHP and I'm not into CSS or design overall.
Here is the code:
#footer {
position: static;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
Single post view (bad, you see white space left bellow the footer):
(source: easycaptures.com)
Few posts that filled whole page (good, footer bellow pagination):
(source: easycaptures.com)
On the other side when I have position set to fixed I have this overflow:
(source: easycaptures.com)
How do I make my code works fine like in picture where it says (good)?
EDIT: For those who say to change position, I've already tried all positions property (static, absolute, fixed, relative, inherit).
Here is my container code:
#contener {
margin: 0 auto;
text-align: left;
width: 100%;
}
Other:
body, html, #menu, img, a img, form, fieldset {
margin:0;
padding:0;
font-size: 12px;
}
When I set position to "absolute" I got this picture.
Here is my full code of pagination + footer:
<?php
$currentPage = 1;
if(isset($_GET['page'])){
$currentPage = protect_sqli($_GET['page']);
}
$e = $currentPage * $num_psts; // end post
$p = $e - $num_psts+1; // start post
$i = 0;
// Create a connection
$conS = mysqli_connect($hName, $dbUser) or die(mysql_error());
// Select a specific database
mysqli_select_db($conS, $dbName) or die(mysql_error());
// Query creating
$result = mysqli_query($conS, "SELECT * FROM posts ORDER BY dat DESC, tim DESC");
while($row = mysqli_fetch_array($result))
{
$i++;
if($i >= $p && $i <= $e)
{
$postId = protect_sqli($row['slug']);
readfile('p/' . $postId . '.php');
}
}
?>
<center>
<p>
<?php
$result = mysqli_query($conS, "SELECT id FROM posts");
$nPosts = mysqli_num_rows($result); // number of posts
mysqli_close($conS);
echo "Pages: ";
$pages = $nPosts/$num_psts; // number of pages
for($i = 1; $i < $pages+1; $i++)
{
if($i == $currentPage)
{
echo "<strong>".$i."</strong> ";
}
else
{
echo "". $i ." ";
}
}
?>
</p>
</center>
<div id="footer">
<?php readfile(__DIR__ . "/mvc/fe/footer.php"); ?>
</div>
</div>
footer.php:
Made by dn5 | <font color="#e1c1aa">cblogphp</font>
Do you mean a sticky footer which is always on the bottom of your site?
The CSS goes like this:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
I think what you are looking for is a Sticky Footer. Ryan Faits has some clear instructions here
Try changing the position to absolute:
#footer {
position: absolute;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
Demo: http://jsfiddle.net/JE5fn/1/
From CSS tricks: http://css-tricks.com/snippets/css/sticky-footer/
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}

Apply link to play button added to media gallery plugin

I am building a site that uses a plugin to create a gallery view a video feed. In the PHP file that generates the gallery view, I added a play button to display on top of the video thumbnails. While the button displays correctly, the plugin applies the video link directly to the thumbnail image, so if a user clicks directly on the button, it does not open the video modal.
<div class="media-thumb videoPreviewBox">
<div class="videoPreview">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
<img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
<img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
</div>
</div>
While I'm not sure why there is a closing tag placed where it is, the plugin seems to work fine. I think the issue is that href="#popup_prep" is applied to the image. I tried to wrap the thumbnail image and play button states in < a href="#popup_prep"> (space added to show tag in post), both with and without the href applied to the image.
I'm stumped and don't want to screw anything up. Hoping a PHP person here can point out what I'm doing wrong. Many thanks!
The rest of this post is information I'm including for due diligence, since I'm not sure how much and what context is needed. First the CSS applied to these elements, followed by the full PHP file for the gallery view.
div.videoPreviewBox {
float: left;
display: inline-block;
width: 21%;
margin: 2%;
margin-top: 0%;
}
#media only screen and (max-width: 594px) {
div.videoPreviewBox {
width: 46%;
}
}
#media only screen and (max-width: 300px) {
div.videoPreviewBox {
width: 96%;
}
}
div.videoPreview {
position: relative;
}
img.videoPreviewImg {
width: 100%;
z-index: 1;
}
img.playButtonHover, img.playButton {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
-webkit-transition: opacity .7s ease-in-out;
-moz-transition: opacity .7s ease-in-out;
-o-transition: opacity .7s ease-in-out;
transition: opacity .7s ease-in-out;
}
div.videoPreview:hover img.playButton {
opacity: 0;
}
div.videoPreviewBox p {
margin-top: 2%;
color: white;
line-height: 18px;
}
.player_wrapper{float: left;}
.player{float: left;clear: both;}
.scroller{margin-bottom: 35px; float: left;clear: both; width: 100%;}
.rssIcon{float: left;clear: both;}
.scroll_item{clear: left; float: left;}
.thumb_img{margin-right: 12px; margin-bottom: 25px; float: left; border-color: white; border-width: 2px; border-style: solid; background-color: #dddddd; height: 135px;}
.preview{ width: 600px; }.play_button{padding: 8px; background-color: #e9e9e9; border-color: #c9c9c9; border-width: 1px; border-style: solid; float: right;}
.rssIcon{width: 100%;}
.gallery_thumb{margin-bottom: 12px; margin-right: 12px; }
.gallery_thumb:hover{cursor: pointer;}
.mejs-container{margin-top: 20px!important}
And the full PHP gallery view file:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$btID = $b->getBlockTypeID();
$bt = BlockType::getByID($btID);
$uh = Loader::helper('concrete/urls');
$rssUrl = $controller->getRssUrl($b);
$textHelper = Loader::helper("text");
$fl = Loader::model('file_version');
$uh = Loader::helper('concrete/urls');
$mh = Loader::helper('media_type','promedia');
$bt = BlockType::getByHandle('promedia_list');
$height = '400';
$width = '600';
$spread = 4;
$playerID = rand(0,777777);
if (count($cArray) > 0) { ?>
<div class="scroller">
<div id="media_galery">
<?php
$t = 0;
for ($i = 0; $i < count($cArray); $i++ ) {
$t++;
$file = $cArray[$i];
$remote = null;
$name = $file->getFileName();
$file_path = BASE_URL.DIR_REL.$file->getDownloadURL();
$ak_d = FileAttributeKey::getByHandle('media_date');
$date = $file->getAttribute($ak_d);
$ak_a = FileAttributeKey::getByHandle('media_artwork');
$image = $file->getAttribute($ak_a);
if($image==null){
$image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png';
}else{
$image = File::getByID($image->fID);
$image_path=$image->getURL();
}
$file_src = BASE_URL.DIR_REL.$file->getRelativePath();
$ak_s = FileAttributeKey::getByHandle('media_audio');
$audio = $file->getAttribute($ak_s);
if($audio){
$audio_array = $mh->getMediaTypeOutput($audio);
$audio_path = $audio_array['path'];
$file_src = $audio_path;
}
$video = null;
$ak_s = FileAttributeKey::getByHandle('media_video');
$video = $file->getAttribute($ak_s);
if($video){
$video_array = $mh->getMediaTypeOutput($video);
$video_path = $video_array['path'];
//var_dump($video_array['id']);
$image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']);
//$video_src = $video_path.'?width='.$width.'&height='.$height;
//$file_src = $video_src;
if($video_array['type'] == 'vimeo'){
$file_src = 'http://player.vimeo.com/video/'.$video_array['id'];
}else{
$file_src = $video_path;
}
}
?>
<div class="media-thumb videoPreviewBox">
<div class="videoPreview">
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
<img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
<img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
</div>
</div>
<?php
if($t == $spread){
$t=0;
echo '</tr>';
}
}
for($d=$t;$d<$spread;$d++){
echo '<td></td>';
if($t == $spread){
echo '</tr>';
}
}
?>
</div>
</div>
<div style="display: none;">
<div id="popup_prep">
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
$('.gallery_thumb').fancybox({
width: 'auto',
height: 'auto',
onClosed: function(){
$('video, audio').each(function() {
$(this)[0].player.pause();
});
}
});
});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
$('.gallery_thumb').click(function(){
$('#popup_prep').html('');
var html = '';
var path = $(this).attr('alt');
//console.log(path);
var extension = path.substr( (path.lastIndexOf('.') +1) );
if(extension){
switch(extension) {
case 'm4v':
case 'mpeg':
case 'mpg':
case 'wmv':
case 'avi':
case 'mov':
case 'flv':
case 'f4v':
case 'mp4':
html = '<video class="player_box" id="play" controls="controls" src="'+path+'" width="<?php echo $width?>" height="<?php echo $height?>"></video><br style="clear: both;"/>';
break;
case 'mp3':
case 'm4a':
html = '<audio class="audioplayer" id="play" src="'+path+'" controls="controls" type="audio/m4a"></audio><br style="clear: both;"/>';
break;
default:
var iFrame = true;
html = '<iframe title="video player" width="<?php echo $width?>px" height="<?php echo $height?>px" src="'+path+'" frameborder="0" allowfullscreen></iframe>';
}
}
$('#popup_prep').append(innerShiv(html));
if(!iFrame){
var player = new MediaElementPlayer('video,audio');
}
});
/*]]>*/
</script>
<?php
}
if(!$previewMode && $controller->rss) {
?>
<div class="rssIcon">
<img src="<?php echo $uh->getBlockTypeAssetsURL($bt, 'rss.png')?>" width="14" height="14" />get this feed
</div>
<link href="<?php echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php echo $controller->rssTitle?>" />
<br/>
<?php
}
if ($paginate && $num > 0 && is_object($_fl)) {
$_fl->displayPaging();
}
?>
For full context, here is the page.
I'm not exactly a php expert, but I notice some problems in this line of code:
</a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/>
First of all, I'm not sure why there is a "/a" there. That is normally the end tag of a hyperlink. (if I put the <> there it disappears from the answer and gets read like html so lets pretend the "" is the same as <>).
Secondly, it looks like you got the stuff inside the quotes for href and alt mixed up. href is the link, alt is the description. Unless you want the description to be the same as the image link, but I would recoment something more fitting such as alt="Play Video".
Thirdly, check the number of spaces in the class. For example, if $playerID="123" and $i=1. The class would be the following: 123player_get1 gallery_thumb (notice the space between $i, or in this example the number 1, and gallery_thumb). Again I might be wrong but I don't think that space should be there and it can be fixed by eliminating the space beside the closing php tag.
Fourthly, you have two href="" in this img tag. Like I said I'm not an expert, but I'm assuming the first one need not be there and probably is causing trouble, as href is the link it will take you to when the image is clicked.
Fifthly, I'm not sure if it really matters or not, but normally an img tag doesn't have a /> at the end, it only requires a >.
Try substituting it for this line of code:
img src="<?php echo $image_path ?>" href="<?php echo $file_src ?>" alt="YOUR DESCRIPTION HERE" class="<?php echo $playerID ?>player_get<?php echo $i ?>gallery_thumb">
*edit: If it works make sure you understand why!

CSS onmouseover gallery with php loop

I once created an image gallery using CSS which did the following:
Created a thumbnail gallery
Created a div where in there was placed 1x1 pixel images
on mouseover of thumbnails, these 1x1 pixel images expanded to fit the div size, with height being relative to length.
My code so far:
php:
echo '<div id="thumbnails">';
$files = glob("11-09-2012/*.*");
for ($i=1; $i<count($files); $i++)
{ //creating thumbnails
$num = $files[$i];
echo '<img src="'.$num.'" height="50px" id="thumb'.$files[$i].'"></img>';
};
echo '</div><div id="gallery">';
for ($i=1; $i<count($files); $i++)
{ //creating 1x1
$num = $files[$i];
echo '<img STYLE="position:absolute" src="'.$num.'" height="1px" width="1px" id="img'.$files[$i].'"></img>';
};
echo '</div>';
CSS:
#gallery {
margin: 0 auto;
border-style: solid;
border-width: 3px;
border-color: #fff;
width: 800px;
height: 600px;
}
Now I'm not sure where to go - Any help is appreciated - alternative ways to do this, is as well.
Best regards - Jesper
A naïve programmer might recommend jQuery, or attach an event to each individual image. Here's how the big boys do it:
(function() {
var box = document.getElementById('thumbnails'),
handler = function(e) {
e = e||window.event;
var tar = e.target || e.srcElement,
type = e.type, id = tar.id, m, img;
if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
}
};
if( typeof box.attachEvent != "undefined") {
box.attachEvent('onmouseover',handler);
box.attachEvent('onmouseout',handler);
}
else {
box.addEventListener('mouseover',handler);
box.addEventListener('mouseout',handler);
}
})();
The only change you need to make to your HTML is to remove the width="1px" height="1px" from your images and instead add width:1px;height:1px;max-width:800px;max-height:600px; to the image's style. This would be better done in the CSS file:
#gallery>img {
position: absolute;
left: 0; top: 0;
width: 1px; height: 1px;
max-width: 800px;
max-height: 600px;
}
http://jsfiddle.net/yDUMT/
The jsfiddle shows the onMouseOver being used with a javascript function to enlarge the 1px when the thumbnail is mouse overed, and the onMouseOut being used with a javascript function to shrink the enlarged 1px image back down when the mouse is moved off the thumbnail.

Categories