I made a gallery with images fetched from DB and using Fancybox for displaying it. I have some articles that are the same, just diferent color and I display just one and underneath color boxes for changing the color.
The problem is that when I click on the button to change the color, picture changes, Fancybox on click displays first picture, not the Current one
Part of the code:
JS:
function changeImage(element,id){
var img=document.getElementById(id).src=element;
return false;
}
PHP:
while($row = mysql_fetch_array($sql)){
$prikaz =$row['prikaz'];
$id = $row['id'];
$ime = $row['ime'];
$thumb = $row['thumbs'];
$boja = $row['boja_id'];
$slicka = $row['slika'];
$spec = $row['tekst'];
if ($prikaz == 1){
echo "<table style ='display: inline' align='center'>";
echo "<tr>";
echo "<td><a class='fancybox-effects-a' href='$slicka' ><img id='$id' src='$thumb' alt='' /></a></td>";
echo "</tr>";
echo "<tr><td>";
echo "Boja: ";
$bsql = mysql_query ("SELECT muski.tekst, muski.id,muski.thumbs,boja.bslika FROM boja INNER JOIN muski ON muski.boja_id = boja.id WHERE muski.ime = '$ime' " );
while($res = mysql_fetch_array($bsql)){
$slicica = $res['thumbs'];
$muid = $res['id'];
$kockica = $res['bslika'];
echo "<button id = 'boja' onclick =changeImage('$slicica','$id')><img src= $kockica ></button>";
}
echo "</br>";
echo nl2br($spec);
}
echo "</td>";
echo "</tr>";
echo "</table>";
I found the solution.... I modified js script to change the parent href of img... It works...
function changeImage(element,id,staza) {
var img = document.getElementById(id);
img.src= element;
img.parentNode.href=staza;
return false;
}
Firebug your Fancy Box pop-up and inside the you have to change back ground image as well
Related
I am trying to make a website but I am very new to the jquery stuff and I added jquery load more comment into my website
My question is, I have a load more button that works the way I intended it to work however when all the data are loaded or when there is no comment I can't seem to get the load button to turn hidden
//jquery script
<script>
$(document).ready(function() {
var commentCount = 20;
var qidNow = "<?php echo $qid; ?>";
$("button").click(function() {
commentCount = commentCount + 20;
$("#comments").load("includes/load-comments.inc.php", {
commentNewCount: commentCount,
qid: qidNow
});
});
});
//load-comments page
<?PHP
require 'dbh.inc.php';
include 'function.inc.php';
$commentNewCount = $_POST["commentNewCount"];
$qid = $_POST["qid"];
$count = 0;
$sqlComment = "SELECT comment, commentTime, commenterId FROM comments WHERE commentOn = ?
LIMIT ?";
$stmtComment = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmtComment, $sqlComment)) {
header("Location: ../viewtopic.php?error=sqlerror4");
exit();
} else {
//bind parameter to the placeholder
mysqli_stmt_bind_param($stmtComment, "ii", $qid, $commentNewCount);
//run parameter inside database
mysqli_stmt_execute($stmtComment);
$commentData = mysqli_stmt_get_result($stmtComment);
}
if (mysqli_num_rows($commentData) > 0) {
while ($row = mysqli_fetch_assoc($commentData)) {
$count++;
echo "<div class='individualComment'>";
echo "<div class='commentCount'> คอมเม้นที่" . $count . "</div>";
echo "<div class='actualComment'>" . $row['comment'] . "</div>";
echo "<div class='commentDateBx'>" . dateReformat($row['commentTime']) . "</div>";
echo "<div class='commenterIdBx'>ID :" . $row['commenterId'] . "</div>";
echo "</div>";
}
}else {
echo "There is no comment yet";
}
This is my HTML code for an image where I can hover over and view another picture
<img class = "images" src = "images/menTop pic1.jpg" onmouseover = "src = 'images/menTop pic1 hover.jpg'" onmouseout = "src = 'images/menTop pic1.jpg'">
I tried to put it in my PHP and replace the IDs and picture with variables but I cannot seem to get it working due to the insane amount of " and '.
echo "<a href='ProductDetail.php?cat_id=".$itemid."'><img class = 'images' src = '".$imagefile."' onmouseover = 'src = '".$imagefile2."'' onmouseout = 'src = '".$imagefile."''></a>";
As of now it shows the first image but does not show the second image when I hover over the picture. Can anyone help me solve this problem? Appreciate the help, thanks!
EDIT:
$mysql = new mysqli("localhost", "root", null, "webdb");
$stmt = $mysql ->prepare("select itemid, itemname, imagefile, imagefile2, itemprice, itemcolor from webdb.item ORDER by itemid ASC");
$stmt->execute();
$stmt->bind_result($itemid, $itemname, $imagefile, $imagefile2, $itemprice, $itemcolor);
$column = 1;
echo "<div class = content>";
echo "<table align = 'center' style = 'width:80%'>";
while($stmt->fetch()) {
if ($column == 1) {
echo "<tr>";
}
echo "<th>";
echo "<a href='ProductDetail.php?cat_id=".$itemid."'><img class = 'images' src = '".$imagefile."' onmouseover = 'src = '".$imagefile2."'' onmouseout = 'src = '".$imagefile."''></a>";
echo "<a href='ProductDetail.php?cat_id=".$itemid."'><h4>".$itemname."</h4></a>";
echo "<p>".$itemcolor."</p>";
echo "<p>".$itemprice."</p>";
echo "</th>";
if ($column == 3) {
$column = 1;
echo "</tr>";
}
else {
$column++;
}
}
echo "</table>";
echo "</div>";
$stmt->close();
$mysql->close();
Currently, this is my block of codes where I am trying to extract every row of data from my item database and to place it nicely in columns of 3 in a webpage. Therefore, if there is a way of placing it in HTML instead of PHP, I'd love if you guys can teach me how to.
Instead of echoing html with PHP like that, it will be much more readable if you write the HTML outside of the PHP-block:
while($stmt->fetch()) {
if ($column == 1) {
echo "<tr>";
}
// Close the PHP block
?>
<th>
<img class="images" src="<?= $imagefile ?>" onmouseover="src='<?= $imagefile2 ?>'" onmouseout="src='<?= $imagefile ?>'">
<h4><?= $itemname ?></h4>
<p><?= $itemcolor ?></p>
<p><?= $itemprice ?></p>
</th>
<?php
// Start the PHP block again
if ($column == 3) {
$column = 1;
echo "</tr>";
}
else {
$column++;
}
}
This way, not only will it be more readable, but you won't you need to escape the quotes + any decent IDE will be able to syntax highlight the HTML as well, making it much easier to spot mistakes.
This part is the problem:
[...] onmouseover = 'src = '".$imagefile2."'' onmouseout = 'src = '".$imagefile."''></a>";
some single quotes that should be replaced by escaped double quotes:
[...] onmouseover = 'src = \"".$imagefile2."\"' onmouseout = 'src = \"".$imagefile."\"'></a>";
<?php echo'<a href ="ProductDetail.php?cat_id='.$itemid.'"><img class="images" src="'.$imagefile.'"
onmouseover="src=\''.$imagefile2.'\';"
onmouseout="src=\''.$imagefile.'\';"/></a>'; ?>
This should solve your problem
You should remove one ' at
onmouseover = 'src = '".$imagefile2."''.
It should be
onmouseover = 'src = '".$imagefile2."'.
I have in my database 2 rows of information so my code create will create positivoNegativo.png twice and the number 10 twice. When I click on the FIRST positivoNegativo.png my number FIRST 10 is incremented (exacly as I wanted to). Now my issue, when I click on the SECOND positivoNegativo.png, the FIRST number is incremented again! I just can't increment the SECOND number by clicking on the SECOND positivoNegativo.png
<html>
<body>
<?php
include_once("./classe/conexao.php");
$busca = $pdo->prepare("select * from anuncios");
$busca->execute();
$linha = $busca->fetchAll(PDO::FETCH_OBJ);
$classe = 0;
foreach ($linha as $lista) {
echo "<p class='demo'>10</p>";
echo "<img src='imagens/positivoNegativo.png'usemap='#mapa'>";
echo "<map name='mapa'>";
echo "<area shape='rect' coords='1,1,73,59' onclick='aumenta($classe)'>";
echo "</map>";
echo "<span>$lista->titulo</span>";
$classe++;
}
?>
<script>
function aumenta(classe) {
var numero = document.getElementsByClassName('demo')[classe].innerHTML;
numero++;
document.getElementsByClassName('demo')[classe].innerHTML = numero;
}
</script>;
</body>
You need to use different map for each image.
foreach ($linha as $lista) {
echo "<p class='demo'>10</p>";
echo "<img src='imagens/positivoNegativo.png'usemap='#mapa$classe'>";
echo "<map name='mapa$classe'>";
echo "<area shape='rect' coords='1,1,73,59' onclick='aumenta($classe)'>";
echo "</map>";
echo "<span>$lista->titulo</span>";
$classe++;
}
Try this:
<?php
include_once("./classe/conexao.php");
$busca = $pdo->prepare("select * from anuncios");
$busca->execute();
$linha = $busca->fetchAll(PDO::FETCH_OBJ);
$classe = 0;
foreach ($linha as $lista) {
echo "<p class='demo".$classe."'>10</p>";
echo "<img src='imagens/positivoNegativo.png' onclick='aumenta($classe)'>";
echo "<span>$lista->titulo</span>";
$classe++;
}
?>
<script>
function aumenta(classe) {
var numero = document.getElementsByClassName('demo'+classe).innerHTML;
numero++;
document.getElementsByClassName('demo'+classe).innerHTML = numero;
}
</script>;
I didn't test the code, but it might give you some hints.
I left out the whole <map> thing because it doesn't make sense in your code. There's only an up?
I have my triggers and divs to show/hide in a while loop, instead of using div id which has to unique, i've decided to use div class to show/hide a group of content among others.
what i'm trying to achieve:
i'm not at all good with javascript, and i've been trying to achieve this for days. Say i have a trigger with div class="view1-'.$id1.'" where $id1=2 and div class="licom-'.$cc_id.'" where $cc_id=2 to show/hide, is it possible to ensure that my trigger would only show/hide the div class with the same id as 2?.
JavaScript
<html>
<head>
<script language="JavaScript">
$(document).ready(function(){
var showText='View all replies';
var hideText='Hide';
// initialise the visibility check
var is_visible = false;
// append show/hide links
$('.view1').prev().append();
$(".licom").hide();
$(".view1").click(function(){//i need to pass the div class with the variable
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
//i also need to pass the right div class with the right variable, and keep the others hidden
$('.licom').toggle(function() {
$(this).closest('view1').find('.licom').hide();
return false;
},
function() {
$(this).closest("view1").next(".licom").show();
return false;
});
});
});
</script>
</head>
<body>
</body>
</html>
info.php
<?php
...........
$stmt = $conn->prepare(
"SELECT *
FROM comment
WHERE post_id = :pid
");
$stmt->bindParam(":pid", $type_id, PDO::PARAM_INT);
$stmt->execute();
while($obj = $stmt->fetch()){
$username = $obj['user_name'];
$comment = $obj['comment'];
$id1 = $obj['id'];
$userimage = $obj['user_image'];
echo '<div class="txt">';
echo '<div class="comment-container">';
echo '<div class="comment-item">';
echo '<div class="comment-avatar">';
echo '<img src="user/user_images/'.$userimage.'" alt="avatar">';
echo '</div>';
echo '<div class="comment-post">';
echo '<span style="font-weight:bold;">'.$username.'  said....
</span>';
echo '<p style="margin-left:-11px;">'.$comment.'</p>';
echo '<input type="hidden" name="comment_id" value="'.$id.'">';
//trigger to hide/show replies
echo '<span class="view1-'.$id1.'" style="float:right;margin-top:-15px;">View all replies</span>';
//
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
//Relpy to comment, show only the first row
$rep = $conn->prepare("SELECT * FROM reply WHERE comment_id = :comid LIMIT 1");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);
$rep->execute();
while($obj = $rep->fetch()){
//...........same output as first without the view all replies trigger......
//Relpy to comment, show from row 2-
$rep = $conn->prepare("SELECT * FROM reply WHERE comment_id = :comid LIMIT 1,18446744073709551615");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);
$rep->execute();
while($obj = $rep->fetch()){
$cc_id = $obj['comment_id'];
//div to show/hide
echo '<div class="licom-'.$cc_id.'">';
//...........same output as first without the view all replies trigger......
}
}
}
?>
how do i re-write my JavaScript so that all div of class "licom" are hidden by default, and only the div with the same id as the trigger say 2,3,... as the case maybe would show/hide onClick.
As requested in the comments on question:
"Something like: http://jsfiddle.net/qjadyznh/ ?"
$('a').click(function(){
var id = $(this).attr('id');
if($('.'+id).css('display') == 'none')
{
$('.'+id).css('display','block');
}
else
{
$('.'+id).css('display','none');
}
})
Simple example on how to achieve the goal needed.
I'm working with PHP, Javascript and MySQL. My goal is to have a button on each row. The button should call the onclick fucntion and href to another page.
My problem with my code -- > only the button from the first row is clickable...
I'm assuming the Button ID needs to be unique for each button.. What are my options to make all buttons clickable ?
// printing table rows
while($row = mysqli_fetch_row($result))
{
echo "<tr>";
echo "<td><button id='greenbutton' class='small pill green'>$row[0]</button></td>";
echo "<td><img src='/iframe/$row[7]'> $row[5]</td>";
echo "<td>$row[4] min(s)</td>";
echo "<td><img src='/iframe/$row[6]'> $row[2]</td>";
if ($row[3] == 0) {
echo "<td>Unknown</td>";
}
else {echo "<td>$row[3]</td>";}
echo "</tr>\n";
// FOR ONCLICK
echo "<script type='text/javascript'>";
echo "document.getElementById('greenbutton').onclick = function () {";
echo "location.href = '/user';";
echo "};";
echo "</script>";
}
echo "</table></center>";
You're id's of your dom elements should be unique at all time. To achieve this you can add a counter in your while so that all of your button have an id like 'greenbutton1', 'greenbutton2', 'greenbutton3', etc.
$cnt = 1;
// printing table rows
while($row = mysqli_fetch_row($result))
{
echo "<tr>";
echo "<td><button id='greenbutton$cnt' class='small pill green'>$row[0]</button></td>";
echo "<td><img src='/iframe/$row[7]'> $row[5]</td>";
echo "<td>$row[4] min(s)</td>";
echo "<td><img src='/iframe/$row[6]'> $row[2]</td>";
if ($row[3] == 0) {
echo "<td>Unknown</td>";
}
else {echo "<td>$row[3]</td>";}
echo "</tr>\n";
$cnt++;
}
echo "</table></center>";
In that exemple I didnt add your javascript function into your while loop because it look like the same function for all your buttons. I suggest you add the function only once but bound it with the class selector instead of the id selector like this.
// FOR ONCLICK
echo "<script type='text/javascript'>";
echo "document.getElementsByClassName('myGreenButtons').onclick = function () {";
echo "location.href = '/user';";
echo "};";
echo "</script>";
And then add the myGreenButtons class to your buttons in the while loop. You can also use attributes or types selector to gather your dom elements in a more flexible way. Check out theses links for more info:
http://www.w3schools.com/cssref/css_selectors.asp
http://www.htmlgoodies.com/beyond/javascript/using-javascripts-css3-selectors.html#fbid=FhIuAA6GqpH
hope this helps!
echo "<td><a href='/user'><button class='small pill green'>$row[0]</button></a></td>";
...will do the trick.