I have a code for product tpl witch I need a condition if a category id=12 echo.. THe code below works on opencart 1.5.6.4 but on 2.0 doesn't generate anything.
<?php if(isset($this->request->get['path'])) {
$path = $this->request->get['path'];
$cats = explode('_', $path);
$cat_id = $cats[count($cats) - 1];
}
?>
<?php if (isset($cat_id) && $cat_id == '108') { ?>
<div style="text-align: right;"><a href = "javascript:void(0)" onclick ="document.getElementById('fade').style.display='block'" style="
color: rgb(221, 0, 23);">Mesurments table</a></div>
<div id="fade" class="black_overlay"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('fade').style.display='none'"></a><img src="/image/data/misc/blugi.jpg"style="
width: 100%;"></div>
?php } ?>
The reason this no longer works is because in 2.0> templates are rendered via the Loader object, not the Controller object.
You'll need to declare your $cat_id variable inside the product controller as a data variable.
So let's clean this up and make it a bit more usable.
In catalog/controller/product/product.php add:
if (isset ($this->request->get['path'])) {
$path = $this->request->get['path'];
$cats = explode('_', $path);
$data['cat_id'] = $cats[count($cats) - 1];
}
Then in your template you can access $cat_id as you like.
In your product.tpl file, in the javascript area at the bottom add:
<script type="text/javascript"><!--
$('#fade-link').css({
color: rgb(221, 0, 23)
}).on('click', function() {
$('#fade').show();
});
$('#fade a.close').on('click', function(){
$('#fade').hide();
});
//--></script>
Then replace your existing code with:
<?php if ($cat_id && $cat_id == '108') { ?>
<div style="text-align: right;">
<a id="fade-link">Measurements Table</a></div>
<div id="fade" class="black_overlay">
<a class="close"></a>
<img src="/image/data/misc/blugi.jpg" style="width: 100%;">
</div>
<?php } ?>
This should get you there, or at least be pretty close, I didn't test it, you may need to adjust the JS.
Related
So I need some help from a Ziggeo user. I have registered 8 videos in my ziggeo server and now I want to display them in pages divided by 2 videos per page.
Here is what I wrote, but unfortunately it doesn't show me any video, but the compiler doesn't say any error.
<?php include('./ziggeo/pagination.class.php');?>
<?php $myvideos = $ziggeo->videos();
$myarray = array($myvideos);?>
<div class="gallery">
<?php if(count($myarray)){
$pagination = new pagination($myarray, (isset($_GET['page'])?$_GET['page']:1), 3);
$videos = $pagination->getResults();
if(count($videos)!=0) {
echo $pageNumbers = '<h2>'.$pagination->getLinks().'</h2>';
foreach ($videos as $video) {?>
<div class="wall-of-videos-container">
<ziggeo ziggeo-video="<?= $video->token ?>"
ziggeo-width=320 ziggeo-height=240 ziggeo-popup> </ziggeo>
<?= date("Y-m-d h:i a", $video->created) ?>
·<?= $video->duration ?> seconds</div>
<? } echo $pageNumbers; } } ?>
</div><!-- End Gallery -->
I included all the files needed for the Ziggeo configuration.
Who can help me? Thank a lot!
Without seeing 'pagination.class.php' file contents and the output that you are creating it is difficult to know what went wrong, however to create pagination in PHP using Ziggeo PHP SDK, you would do something like this:
<?php
require_once('Ziggeo.php');
$ziggeo = new Ziggeo('YOUR TOKEN', 'YOUR PRIVATE KEY', 'YOUR ENCRYPTION KEY');
?>
You can get the token and keys from your dashboard on ziggeo.com
Ziggeo.php can be retrieved from Ziggeo PHP SDK here: github.com/Ziggeo/ZiggeoPhpSdk
Now looking at your code it seems that this is the call that you are not making correctly. To get the videos you should make the following call:
<?php $myvideos = $ziggeo->videos()->index(); ?>
It is good to remember that by default you will only get up to 50 videos, so if you are expecting to have more than that, you should set the limit parameter.
You can set limit, skip, reverse, states and tags
In case you want to get up to 100 videos (which is maximum per call) you would do something like this:
<?php
$myArguments = array('limit' => 100);
$myvideos = $ziggeo->videos()->index($myArguments);
?>
Now to list them, you would do something like this:
<?php
foreach ($myvideos as $video) {
?>
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php
}
?>
You could add a check with count($myvideos) before foreach, however it should not be needed.
In general, to create a page with 2 videos per page you could use something like this:
<?php
$i = 0; //to have two videos per page
$j = 0; //to see how many we have
foreach ($myvideos as $video) {
$j++;
if($i === 0) { ?>
<div class="gallery_page">
<?php } ?>
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php
$i++;
if($i === 2) { ?>
</div>
<div class="page_number"><?php echo $j/2; ?> </div>
<?php
$i = 0;
}
}
if($i !== 0) {
?>
<div class="page_number"><?php echo (($j-1)/2)+1; ?> </div>
<?php
}
?>
It is good to point out that the above code is not a complete paging system - it is just a simple sample that shows you how you could do it, however it would need to be customized and worked upon further to match gallery style, and similar.
Looking at your code, I think that it should work using something like this:
<?php
include('./ziggeo/pagination.class.php');
$myvideos = $ziggeo->videos()->index();
?>
<div class="gallery">
<?php
if(count($myvideos)) {
$pagination = new pagination($myarray, (isset($_GET['page']) ? $_GET['page']:1), 3);
$videos = $pagination->getResults();
if(count($videos)!=0) {
echo $pageNumbers = '<h2>'.$pagination->getLinks().'</h2>';
foreach ($videos as $video) { ?>
<div class="wall-of-videos-container">
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php echo date("Y-m-d h:i a", $video->created); ?>
·<?php echo $video->duration; ?> seconds</div>
<?php } echo $pageNumbers;
}
} ?>
</div><!-- End Gallery -->
I did presume however that you have the headers set in the HTML HEAD of the page where the gallery will be shown:
<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-latest/ziggeo.css" />
<script src="//assets-cdn.ziggeo.com/v1-latest/ziggeo.js"></script>
<script type="text/javascript">ZiggeoApi.token="YOUR TOKEN"</script>
If not present, the HTML code will be created from the above PHP code, however your videos would not be shown due to Ziggeo framework not being loaded on client side.
UPDATE (2016/05/31)
As the above is just general way to do this, it is not including CSS nor JavaScript.
As such I am adding the full code that can be used and as it shows another way to collect the page numbers and leaving the above so that someone can see both.
<script type="text/javascript">
//Basic code needed to switch pages
var currentPage = 1;
function showPage(number) {
//If we are on the same page as the selected one, we just break away from the function, so that we do not hide the same.
if(currentPage === number) { return false; }
var toShow = document.getElementById('page_' + number);
var toHide = document.getElementById('page_' + currentPage);
toShow.style.display = 'block';
toHide.style.display = 'none';
currentPage = number;
}
</script>
<style type="text/css">
/* Code to hide the pages (all) and show first one only, as well as a bit of styling so that it has some basic frame */
.gallery_page > ziggeo {
float: left;
}
.gallery_page {
background-image: linear-gradient(-45deg, lightGray, white);
border-radius: 10px;
box-shadow: 0 0 2px gray;
box-sizing: border-box;
display: none;
min-height: 400px;
margin: 20px 0;
padding: 40px;
width: 720px;
}
.gallery_page:first-child {
display: block;
}
.page_number {
box-shadow: 0 0 3px gray;
float: left;
margin: 0 4px;
text-align: center;
width: 2em;
}
</style>
<div class="gallery">
<?php
//How many videos per page do we want to have?
$numberOfVideos = 2;
//How many videos was there in total?
$totalNumberOfVideos = 0; //only if we need it for something later on
//How many videos are approved / are shown
$totalNumberOfApprovedVideos = 0; //only if we need it for something later on
//which page are we working on?
$currentPage = 1;
//Will serve as buffer for page number elements
$pageNumbers = '';
//temporary videos counter
$i = 0;
foreach ($myvideos as $video) {
//to only show approved videos
if($video->approved === true) {
if($i === 0) { ?>
<div class="gallery_page" id="page_<?php echo $currentPage; ?>">
<?php } ?>
<ziggeo ziggeo-video="<?php echo $video->token; ?>" ziggeo-width=320 ziggeo-height=240 ziggeo-popup></ziggeo>
<?php
$i++;
if($i === $numberOfVideos) { ?>
<br style="float:none; clear:left;">
</div>
<?php
$pageNumbers .= '<div onclick="showPage(' . $currentPage . ');" class="page_number">' . $currentPage . '</div>';
$currentPage++;
$i = 0;
}
$totalNumberOfApprovedVideos++;
$totalNumberOfVideos++;
}
else {
//$video->moderation_reason
//If you want to check if there was a reason why the video was not approved, you can check the above, or alternatively, you could do something else at this point.
$totalNumberOfVideos++;
}
}
if($i !== 0) {
$pageNumbers .= '<div onclick="showPage(' . $currentPage . ')" class="page_number">' . $currentPage . '</div>';
}
?>
</div><!-- End Gallery -->
<?php echo $pageNumbers; ?>
<?php
//This is not needed for pagination to work, however you might want to show it, etc
echo '<br><br>';
echo 'Approved videos: ' . $totalNumberOfApprovedVideos . '<br>';
echo 'Total videos: ' . $totalNumberOfVideos . '<br>';
echo 'Total number of pages: ' . $currentPage . '<br>';
echo $numberOfVideos . ' videos per page<br>';
?>
It is good to point out that this is just a framework - so the code mentioned before will work just as the followup code does, however both require additional styling and code to make it look nice and behave as we want it.
After adding the java script below:
<script type="text/javascript">
var currentPage = 1;
function showPage(number){
var toShow = document.getElementById('page_' + number);
var toHide = document.getElementById('page_' + currentPage);
toShow.style.display = 'block';
toHide.style.display = 'none';
currentPage = number;}
</script>
And the right references to the div gallery, now all is working. Thanks Bane.
So I have a table where each cell is a name of a game and when you click it it needs to show in a fancybox the results of the user which clicked the cell (I use table Indexes to get the GameID and the Session variable to get userID) which will be used to load the results from a second PHP page.
If I click on a cell for the first time the fancybox will not display anything and after I close fancybox and click on any cell again it works fine. Am I doing something wrong?
This is the whole javascript:
$(".jogos").fancybox({
'hideOnContentClick': true,
'onComplete':function(element)
{
var gameIdx = $(element).index();
var cateIdx = $(element).parent().parent().index();
var gameIdxPHP;
var catIdxPHP;
var gameID;
var userId = '<?php echo $_SESSION['userID']; ?>'
<?php
for ($i=1; $i<= count($categoryArray);$i++)
{
for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
{
?>
catIdxPHP = '<?php echo $i ?>' -1;
gameIdxPHP = '<?php echo $j ?>' -1;
if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
{
gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
$("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
}
<?php
}
}
?>
}
});
HTML
<div style="display:none">
<div id="data">
<div id="graphic">
</div>
</div>
</div>
Sample code of the link
<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >
You have display:none on the parent of your fancybox therefor the grafic isnt displayed.
The Grafic element isn't inside the dom yet if you use display:none initially. Try to use clip: rect instead as a class and add/remove that class using the fancybox callbacks.
Try this code:
$('.jogos').fancybox({
'onStart': function() {
$("#data").removeClass('hidden');
},
'onClosed': function() {
$("#data").addClass('hidden');
}
});
CSS:
.hidden {
clip: rect(1px 1px 1px 1px);
position: absolute;
)}
HTML:
<div>
<div id="data" class="hidden">
<div id="graphic">
</div>
</div>
</div>
I put Jquery Tools's Overlay in my site to show a projects' info in several overlays. This works pretty ok, but I have been trying to 'automate' the code to read new projects and load them in overlays. What happen looks ok, but no matter which project I click, the overlays allways load the content of the first project...
I did a lot of googling around and copy-pasting to get this far, I am not (yet) much of a programmer, I hope the code doesn't scare you guys.. ;-)
Anyway, here's a link: http://www.wgwd.nl/test
If you click 'Projects' a normal div opens that loads all the projects it finds (two, for now). When you click one it opens that content in 3 overlays. As said, unfortunately it allways loads the same content independent of which project you click.
I have tried to assign the JScript a unique function name (generated with php from the project's filename) but that doesn't seem to work.
Any ideas? here's my code :
<?
//reads projectfolder and distills
//a basename out of the project description.txt
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
foreach ($textfiles as $textfile) { ?>
<div id="details"> <?
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
// the link that opens the overlays. Don't think the "id" tag is nescessary
echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?>
<!-- defines overlay, hidden by default -->
<div id="dragwindow1" class="overlay ol1">
<a class="close"></a>
<?
include ('content/projects/'.$base_name.'/content.txt');
?>
</div>
</div>
<?
// the description of each project
include ($textfile);
?>
<script>
// within the foreach open all overlays with function name $base_name
var <?=$base_name?> = function () {
$("a[rel]").each(function() {
$(this).overlay().load();
});
}
</script>
<hr />
<? } //end foreach ?>
</div>
<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work -->
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an>
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a>
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a>
<script type="text/javascript">
$(function projects() {
// positions for each overlay
var positions = [
[120, '15%'], //uppper left, #1
[70, '60%'], // lower left, #2
['60%', '40%'], // lower right, #3
];
// setup triggers
$("a[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
// setup custom finish position
top: positions[i][0],
left: positions[i][1],
});
});
});
</script>
Thx in advance!
EDIT: I edited the code to omit all that's unrelated
The question remains: Javascript only returns the content of the first call in the foreach loop. Is there anyway to generate multiple instances of the javascript for each loop in the PHP?
SOLVED! With big, big, help of a friend, who redefined how multiple Overlays from Jquery Tools could work (and should have worked in the first place...)
Without getting too much into it, here's the code for future reference:
Basically the trick is:
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
The complete page is now something like this:
<script type="text/javascript">
$(function () {
// positions for each overlay
var positions = [
['60%', 540], // lower right, #3
[80, '65%'], // lower left, #2
[120, '12%'], //uppper right, #1
];
// setup triggers
$("div.overlay").each(function(i) {
$(this).overlay({
// some configuration for each overlay
// positioning the overlays
top: positions[i % 3][0],
left: positions[i % 3][1]
});
});
});
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
// close all overlays
function closeAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().close();
});
}
</script>
<div id="projectstarter">
<h2>Projects</h2>
<div class="maindetails">
<a class="close"></a> <!-- defines a close button for the overlay -->
<?
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
rsort($textfiles);
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">';
echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>';
include '$textfile'; //project description
} // end MAIN foreach ?>
</div>
</div>
<div id="projects">
<?
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']); ?>
<div id="dragwindow3" class="<?=$base_name?> overlay ol3">
<a class="close"></a>
<h2>Media</h2>
<div class="details">
// include media here
</div>
</div>
<div id="dragwindow2" class="<?=$base_name?> overlay ol2">
<a class="close"></a>
<h2>Credits</h2>
<div class="details">
// include credits here
</div>
</div>
<div id="dragwindow1" class="<?=$base_name?> overlay ol1 ">
<a class="close"></a>
<h2>Content</h2>
<div class="details">
// include content here
</div>
</div>
<? } ?>
<script>
$( "#projectstarter" ).overlay();
$( "#projectstarter" ).draggable().resizable({ghost: true});
$( ".ol1" ).draggable().resizable({ghost: true});
$( ".ol2" ).draggable().resizable({ghost: true});
$( ".ol3" ).draggable().resizable({ghost: true});
</script>
Hello im trying to make a button move in php and looking for tips from j query guys to just in case its easier to do in j query. I have worked out if i put left right and center ( the words ) in a array then pick one at random and print it out in side a div tag then put a button in the div tag the div should be arranged some times right , left , center which would make the button move ? here is my code
<?php
$Keywordarray = new array(3);
$Keywordarray[0] = "left";
$Keywordarray[1] = "right";
$Keywordarray[2] = "center";
$rand_key = array_rand($Keywordarray);
?>
<div align="<?php echo $rand_key ; ?>">
<button type="button">Click Me!</button>
</div>
But im getting a white page ?? I wanna try and move the button to stop macroing but only left right and center
I also have tryied this
<?php
$numbers = range(left, right , center);
shuffle($numbers);
foreach ($numbers as $number) {
}
?>
<div align="<?php echo $number ; ?>">
<button type="button">Click Me!</button>
</div>
Which the page appears but button does not move ?
Found some java script that works now
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var flag = 1;
function t() {
if(flag == 1) {
Y.style.top = "75px";
Y.style.left = "700px";
}
if(flag == 2) {
Y.style.top = "115px";
Y.style.left = "100px";
}
if(flag == 3) {
Y.style.top = "300px";
Y.style.left = "350px";
}
flag = flag + 1;
if(flag == 4) {
flag = 1;
}
}
function al() {
alert("Correct!");
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
</center>
</DIV>
<DIV ID="Y" STYLE="position:absolute; left:300px; top:300px; width:50px;
height:50px;">
<form>
<input type=button value="YES" onClick="t()">
</form>
</DIV>
try:
$rand_key = $Keywordarray[array_rand($Keywordarray)];
You shoud first check the manual :)
http://php.net/manual/en/function.array-rand.php
array-rand returns the key.
Here is my :
<?php
if($total_count > 0)
{
while($val =$objDB->get_row($rs_member))
{
// $flowplayer = "player".$val['video_id'];
$VideoPath = "uploadedvideo/video/".$val['video'];
?>
<div style="border:#FF0000;">
<div id="video1">
<a href="<?=$VideoPath?>"
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.5.swf", {
clip: {
// these two configuration variables does the trick
url: '<?=$VideoPath?>',
autoPlay: false,
autoBuffering: true // <- do not place a comma here
}
});
</script>
</div>
</div>
<?php
}
}
?>
Instead of this I need to play all video file in a single page serially..how to do this..please help
How about creating an array of all the videos you want to play and then add them to a playlist, like so:
<?php
if($total_count > 0)
{
$Videos = array();
while($val =$objDB->get_row($rs_member))
{
// $flowplayer = "player".$val['video_id'];
$Videos[] = "uploadedvideo/video/".$val['video'];
}
$VideoPlaylist = "'" . implode("', '", $Videos) . "'"; // will look something like : 'vid1.fla', 'vid2.fla'
?>
<div style="border:#FF0000;">
<div id="video1">
<a
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.5.swf", {
clip: {
// these two configuration variables does the trick
autoPlay: false,
autoBuffering: true // <- do not place a comma here
},
playlist: [<?php echo $VideoPlaylist; ?>]
});
</script>
</div>
</div>
<?php
}
?>