PHP changing loaded page link style - php

Is there any automatic way to change style of loaded page link? For example, here is my menu:
<a href="private.php?show=link1"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id1.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link1</div>
<div class="clear"></div>
</div></a>
<a href="private.php?show=link2"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id2.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link2</div>
<div class="clear"></div>
</div></a>
<a href="private.php?show=link3"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id3.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link3</div>
<div class="clear"></div>
</div></a>
<a href="private.php?show=link4"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id4.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link4</div>
<div class="clear"></div>
</div></a>
So question is, how to change loaded page private.php?show=link1 style without attaching style in each page?
Coz i have lots of pages and whole menu is included from php file. So style would be changed depending from loaded page like: private.php?show=link1 or private.php?show=link3 would it be on PHP or some other way?
Cheers!

In your private.php you can put something like :
switch ($_GET['show']) {
case 'link1':
echo "<style> .... </style>";
break;
case 'link2':
echo "<style> .... </style>";
break;
case 'link3':
echo "<style> .... </style>";
break;
case 'link4':
echo "<style> .... </style>";
break;
default:
echo "<style> .... </style>";
break;
}
Replace the ... with your CSS for each link.

you can use javascrpt to get value of link:
<script>
function loadcontent(link){
$('#mystyle').load('private.php?link='+link);
}
</script>
so your link must be like this:
<div id='mystyle'>
and then in your php file do something like this:
$link = $_GET['link'];
//echo the divs you like depending on value of $link

Related

how do i make an image to zoom in bootstrap in codeigniter view when click on image?

<h5>
<a href="<?php echo base_url(); ?>/vendor/home/projects" >Back to Projects</a>
<h5>
<div>
<div class="container">
<div class="row">
<?php
foreach ($projects as $value) {
?>
<?php
$project_images = json_decode($value['project_gallery'],true);
$i=0;
foreach ($project_images as $project_image_value) {
$i++;
?>
<div class="col-md-2">
<img src="<?= base_url() ?>assets/uploads/projects/<?=$project_image_value['fname']?>" onclick="openModal(<?= $i?>)" class="img-thumbnail img-responsive " />
<div><?=$project_image_value['title']?></div>
</div> <?php
}
?>
<?php
}
?>
</div>
</div>
this is my codeigniter view to display images. How can i Apply light box so that when you click image, only that image should be zoomed
There are so many easy to use JQuery plugins available for image zoom kind of functionality. Use any of the following:
There use is as simple as:
$(document).ready(function(){
$('a.photo').zoom({url: 'photo-big.jpg'});
});
Reference
Some more reference:
https://i-like-robots.github.io/EasyZoom/
http://www.jqueryscript.net/tags.php?/image%20zoom/
http://www.jqueryscript.net/demo/Simple-jQuery-Magnifying-Glass-Image-Zoom-Plugin-magnify-js/

get two paths of images from database and loop them to display in slider

Im little bit stuck on a logic.scenario is i have a slider where two images are shown at a time taking 50%-50% part of screen,here is the simple html of it,
<div class="zeus-slider zeus-default" >
<div class="zeus-block">
<div class="zeus-slide s-50"> <img src="slider/slider1.jpg" data-effect="slideRight" alt="" /> </div>
<div class="zeus-slide s-50"> <img src="slider/slider2.jpg" data-effect="slideRight" alt="" /> </div>
</div>
</div>
here every block contains two images i have shown only one.now i have trying to make it dynamic, but i didnt get any idea how it will work, so i created database with two tables, each for individual image in a single block.Both table have fields like simg_id(A_I),img_name,simg_path.
here its my php on slider page.
<div class="zeus-block">
<?php
$slider_slt=getResultSet('select * from slider_img_master1 ORDER BY simg_id');
if(mysql_num_rows($slider_slt))
{
while($slider_data=mysql_fetch_assoc($slider_slt))
{
?>
<div class="zeus-slide s-50"> <img src="slider/first/<?php echo $slider_data['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
<?php
$slider_slt2=getResultSet('select * from slider_img_master2 ORDER BY simg_id');
if(mysql_num_rows($slider_slt2))
{
while($slider_data2=mysql_fetch_assoc($slider_slt2))
{
?>
<div class="zeus-slide s-50"> <img src="slider/second/<?php echo $slider_data2['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
</div>
now the problem is when i try to fetch path of image in slider, images are not changing one by one on both half of screen.instead it showing like both images from from both table top, another two images from both tables below 1st both, and so on , so full page is covered with images.
I know this idea of creating two tables for getting two images at once is silly,but i could not think any better.if any one can suggest any better way, it would be so helpful.
Update:getResultSet is function for mysql_query.
if anybody interested i found an answer for above question.
<div id="slide1" >
<div class="zeus-slider zeus-default" >
<?php
$slider_str="select *from slider_img_master1 where simg_status='Active'";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
echo '<div class="zeus-block">';
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
echo '<div class="zeus-block">';
}
?>
<div class="zeus-slide s-50"> <img src="slider/<?php echo $row['simg_path'];?>" data-effect="slideRight" alt="" /> </div>
<?php
if($i%2==0)
{
echo '</div>';
}
$i++;
}
} ?>
</div>
<div class="clear"> </div>
<div class="next-block"> </div>
<div class="prev-block"> </div>
</div>

Display diffrent content in a DIV base on which link you click

I have a demo website I have been trying out some capabilities on. What I am trying to do is only display the DIVs with green or blue based on which link you click into the page.
Here is the example main page i use right now, however it requires me to build 3 separate pages to display results; all.php, green.php, and blue.php. I would like to have only one page and hide or show DIVs as needed
<?php
// which page should be shown now
$page = (isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 'home';
// only the pages listed here can be accessed
// any other pages will result in error
$allowedPages = array('home',
'all',
'blue',
'green',
)
;
if (!in_array($page, $allowedPages) || !file_exists($page . '.php')) {
$page = 'notfound';
}
// set prettier title
//$title .= ($page != 'home') ? ' - ' . ucfirst($page) : '';
// start output buffering so headers can be used in sub pages
ob_start();
?> <html>
<head>
<title>tester</title>
<link rel="stylesheet" href="nav.css" type="text/css" media="all" />
<script type="text/javascript" src="sucker.js"></script>
</head>
<body>
<ul id="nav">
<li>
All Color
</li>
<li>
<a href="index.php?page=green">Greew/a>
<ul>
<li>
Blue
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
<?php
include($page . '.php');
?>
</body>
</html>
This is the content of all.php
<div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue1.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 1</a></h3>
<p class="itemPrice">$5.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" />
</div>
<div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue2.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 2</a></h3>
<p class="itemPrice">$3.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
<div style="min-height: 245px;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue3.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 3</a></h3>
<p class="itemPrice">$4.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" alt= "Quick View" /></div>
<div style="min-height: 245px;" class="itemWrapper last">
<a class="itemLink" href="http://www.demo.com/products/green1.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Green Item 1</a></h3>
<p class="itemPrice">$1.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
<div style="min-height: 245px;" class="itemWrapper last">
<a class="itemLink" href="http://www.demo.com/products/green2.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Green Item 2</a></h3>
<p class="itemPrice">$2.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
</div>
Any help you can provide would be great!
jQuery/JavaScript is the way to go here if you want it to be seamless, but since you're saying this is just a sort of "test" site, I assume you are doing it more to experiment with PHP and have fun. So, what you need to do is put all three pages into one file, then wrap all three pages inside an if...then statement. Effectively:
<?php
if (!isset($_POST['page'])) {
//let the user make a choice
} else if ($_POST['page'] == 'green') {
?>
<!--HTML for the "green" pages goes here!-->
<?php
} else if ($_POST['page'] == 'blue') {
?>
<!--HTML for the "blue" pages goes here!-->
<?php
} else {
print("Invalid page selection!"); //Keep in mind, we want to "error check" to make sure the user actually selected a page
}
?>
If you had many more "pages", you should use a switch statement. If this were a really big application you could use an include() statement (but make sure you check that the file exists!) and just include multiple styled files inside your application.
You could load it all, and have them in different classes, and load them using jQuery. I made an example - check it out here.
$(document).ready(function() {
$(".green").hide();
$(".blue").hide();
Something like that - and then showing them onclick of the buttons.
Just write something like this into your body tag
<body class="
<?php
... if isset... if in_array
switch ($page)
{
case "green":
echo "body_green";
break;
case "blue":
echo "body_blue";
break;
default:
echo "";
}
?>
">
And in your CSS
.green, .blue {
display:none;
}
.body_green .green {
display: block;
}
...

Is it possible to call different sections of code from a php file?

I am pretty new to php. Please excuse me if this is a foolish question.
I have added social share icons to my blog via php. In the main index page I added facebook, twitter and google plus share icons and in the single post I added some more icons.
How I implemented?
I created two php files social_main_index.php and social_single_post.php
Then in the main index template I added the code <? php include("social_main_index.php") ?>
In single post template I added the code <? php include("social_single_post.php") ?>
My Question
Can I create a single php file containing both codes and call any one of them specifically?
My code in social_main_index.php
<?php include_once("custom_css.php") ?>
<div class="social-single">
<!--Facebook Share-->
<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=button_count&show_faces=false&width=100&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>
<!--Google Plus Share-->
<div id="plusonebutton"><g:plusone href="<?php echo rawurlencode(get_permalink()); ?> "size="medium"></g:plusone></div>
<!--Twitter Share-->
<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> </div>
</div>
</div>
My code in social_single_post.php
<?php include_once("custom_css.php") ?>
<div class="social-single">
<!--Facebook Share-->
<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>&layout=button_count&show_faces=false&width=100&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>
<!--Google Plus Share-->
<div id="plusonebutton"><g:plusone href="<?php echo rawurlencode(get_permalink()); ?> "size="medium"></g:plusone></div>
<!--Twitter Share-->
<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> </div></div>
<!--Linkedin Share-->
<div id="linkedinshare"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink() ?>" data-counter="right"></script></div>
<!--Stumble Share-->
<div id="stumblebutton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script></div>
</div>
This is actually a pretty simple thing to do, and I recommend you read up on the manual when you get a chance. Just create a function that will return either bit of html:
function print_buttons($button_set) {
if ($button_set == "one") { //if the local variable for the function is the string "one", then paste the data below where the function is called
return '<div class="social-single">
<!--Facebook Share-->
<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href='.rawurlencode(get_permalink()).'&layout=button_count&show_faces=false&width=100&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>
<!--Google Plus Share-->
<div id="plusonebutton"><g:plusone href="'.rawurlencode(get_permalink()).'"size="medium"></g:plusone></div>
<!--Twitter Share-->
<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> </div>
</div>
</div>';
}
else { //if the local variable is anything else, do the same thing, but with the below data instead.
return '<?php include_once("custom_css.php") ?>
<div class="social-single">
<!--Facebook Share-->
<div id="likebutton"><iframe src="http://www.facebook.com/plugins/like.php?href='.rawurlencode(get_permalink()).'&layout=button_count&show_faces=false&width=100&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div>
<!--Google Plus Share-->
<div id="plusonebutton"><g:plusone href="'.rawurlencode(get_permalink()).'"size="medium"></g:plusone></div>
<!--Twitter Share-->
<div id="twitterbutton"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><div> </div></div>
<!--Linkedin Share-->
<div id="linkedinshare"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="'.the_permalink().'" data-counter="right"></script></div>
<!--Stumble Share-->
<div id="stumblebutton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script></div>
</div>';
}
}
And then to use it...
echo print_buttons("one"); //this will print the first group
echo print_buttons("anything else"); //this will print the second
Take note that this is a shoot in the dark, as I don't know what the functions you were echoing out and otherwise returned/did. If I did, I could say for certain this would work for you. I however do not, and thus the above.
To use this function, make sure it is included on the page it is being used in, just as the css above is included via include(). Example:
some_functions.php:
<?php
function the_function_above() { }
?>
And then...
The_page_above.php:
<?php
include("some_functions.php");
echo the_function_above();
?>

PHP & WP: Render Certain Markup Based on True False Condition

So, I'm working on a site where on the top of certain pages I'd like to display a static graphic and on some pages I would like to display an scrolling banner.
So far I set up the condition as follows:
<?php
$regBanner = true;
$regBannerURL = get_bloginfo('stylesheet_directory'); //grabbing WP site URL
?>
and in my markup:
<div id="banner">
<?php
if ($regBanner) {
echo "<img src='" . $regBannerURL . "/style/images/main_site/home_page/mock_banner.jpg' />";
}
else {
echo 'Slider!';
}
?>
</div><!-- end banner -->
In my else statement, where I'm echoing 'Slider!' I would like to output the markup for my slider:
<div id="slider">
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/1.jpg" alt="" />
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/2.jpg" alt="" />
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/3.jpg" alt="" />
.............
</div>
My question is how can I throw the div and all those images into my else echo statement? I'm having trouble escaping the quotes and my slider markup isn't rendering.
<div id="banner">
<?php if($regbanner): ?>
<img src="<?php echo $regBannerURL; ?>/style/images/main_site/home_page/mock_banner.jpg" />
<?php else: ?>
<div id="slider">
<img src="<?php echo ($bannerDir = bloginfo('stylesheet_directory') . '/style/images/main_site/banners/services_banners'); ?>/1.jpg" alt="" />
<img src="<?php echo $bannerDir; ?>/2.jpg" alt="" />
<img src="<?php echo $bannerDir; ?>/3.jpg" alt="" />
.............
</div>
<?php endif; ?>
</div><!-- end banner -->
If you don't like the offered solution using the syntaxif(...):...else...endif; you also have the possibilty of using heredoc-style to include bigger html-parts into an echo-statement without the need of escaping it.
The code-formatting in here unfortunatly messed up my example, which I wanted to post. But if you know the heredoc-notation, it should not be a problem ;)

Categories