My html code is like this :
<input type='file' multiple style="display: none;" id="upload-file" />
<div class="img-container">
<button type="submit" class="btn btn-primary" id="upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<?php
for($i=0;$i<4; $i++) {
?>
<div class="img-container" id="box<?php echo $i ?>">
</div>
<?php
}
?>
My javascript code is like this :
$("#upload-add-product").click(function(){
$("#upload-file").click();
});
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
}
});
};
Demo and full code is like this : http://phpfiddle.org/main/code/q47z-p15c
I want to make like this :
When user select 2 image, plus icon will move to box number 3
When user selects 5 image, plus icon will disappear
I had try to move the plus icon, but I can't do it
How can I solve this problem?
You can add buttons to each container only the first button will be visible initially.
display the next button only after the image is added to the container
Update your Html as given below :
<?php for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0">
<button type="submit" class="btn btn-primary upload-add-product"<?php
if($i!=0) echo' style="display:none;"'; ?> >
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<?php } ?>
Update the JS Function imageIsLoaded() after you set the IsImgAdded flag
$(this).attr('data-status',1)
$(this).find('button').hide()
$('.img-container').each(function(){
if( $(this).attr('data-status') != 1){
$(this).find('button').show();
return false;
}
})
PS : i changed the id : upload-add-product to class upload-add-product
You might need to tweak the code..
Put the plus icon in each and every one of picture frames. Create a function that has an input. That input would be sent from the html such as;
function change(input) {
var a = input;
if (a == 1)
{
document.getElementById(second picture's plus icon).style.display = "block";
document.getElementById(first picture's plus icon).style.display = "none";
}
}
and have if statements for every picture frame. If you up to 5 you disable all the plus icons.
Everytime you finish selecting a picture use function change(frame's index);
Related
I am trying to implement like button when after clicked it should increment the number of likes but i am trying to implement inside the php code but it is not working and i am not able to figure out what is the problem here?
<html>
<script>
$(".like_button button").on("click", function() {
var $count = $(this).parent().find('.count');
$count.html($count.html() * 1 + 1);
});
</script>
<?php
echo '<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>';
?>
</html>
why this code is not working?
It's because you're selecting your button before it exists. Put $(".like_button button") after the button :
<?php
echo '<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>';
?>
<script>
$(".like_button button").on("click", function() {
var $count = $(this).parent().find('.count');
$count.html($count.html() * 1 + 1);
});
</script>
Edit :
Following up with your comments, you haven't included jQuery but you're trying to use it ($). Then the solution is simple : include jQuery. And open your console.
Working snippet :
$(".like_button button").on("click", function() {
var $count = $(this).parent().find('.count');
$count.html($count.html() * 1 + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>
<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>
i want to make a toggle image like when i clicked the image the sub image will show up something like that... this is the image that has a toggle function..
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$albumname='';
$album = $carousel->get_album($user_id);
foreach ($album as $key => $myalbum) {
$albumname = $myalbum['album_name'];
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>">
<p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p>
</div>
<p></p>
</div>
<?php
}
?>
this is where my function goes..
<script type="text/javascript">
$(document).on('click', 'img[data-id]', function () {
var selected = $(this).attr('data-id');
$ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle();
});
</script>
this is where the sub image will show up. once that i clicked the image..
<div class="col-md-12 picforalbum">
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$album = $carousel->get_photoINalbum($albumname,$user_id);
foreach ($album as $key => $pic) {
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" >
</div>
<p></p>
</div>
<?php
}
?>
</div>
but the problem is when i tried to click the toggle image nothing happens...
Assuming that you want a toggle function for your image, I went ahead and built a simple JSfiddle. (As the picture takes a bit of time to load based on your net connection, please wait for a few seconds after clicking the image.)
What you need to do is basically call a function through onclick() on your image which changes the src attribute of your img tag. Thus if you maintain a boolean variable, you can easily alternate between true and false to change your image. So for true you'd have link1 and for false you'd have link2.
EDIT : Since you said that the image should act as a toggle for "sub" images, I have edited the code wherein an image acts as a toggle for another image beside it. Check out the updated fiddle and code snippet below.
Here is a simple example.
var toggle = false;
function toggle_img() {
if (toggle) {
document.getElementById("toggle_image").style.opacity = 0;
toggle = false;
} else {
document.getElementById("toggle_image").style.opacity = 1;
toggle = true;
}
}
<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" />
<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>
How can I hide all the images in a recordset except the image with the mouse hover on?
Images are displayed from the database and I am trying to manipulate how the images respond when a user hovers on any particular image.
Based on what I have read here on stackoverflow I came up with the following that actually works but with one limitation
On page load it works fine but once you start moving from image to image nothing happens.
I want only the active or image with hover to show while hiding the rest.
$(document).ready(function() {
$('.teamDisplay').hover(function(){
var infoFont = $(".imageDiv")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOff');
$(this).addClass('imageDivOn');
}, function(){
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOn');
$(this).addClass('imageDivOff');
});
});
I am also using css to show or hide the images but the hover function appears to work just once on page load.
How do I trigger this hover function each time a new image has focus?
This is the website with the feature I hope to replicate
UPDATE
The html code
`<div class="memberPicBg">
<?php do { ?>
<span class="teamDisplay">
<?php
// Show If File Exists (region1)
if (tNG_fileExists("../images/team/", "{members.tmemberphoto}")) {
?>
<span class="imageDiv" data-imgPath="../images/team/<?php echo $row_members['tmemberphoto']; ?>">
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span><br /><br />
<img src="../images/team/<?php echo $row_members['tmemberphoto']; ?>" alt="<?php echo my_meta_description($row_members['tmember'],6); ?>" border="0" /> </span>
<?php
// else File Exists (region1)
} else { ?>
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span>
<?php }
// EndIf File Exists (region1)
?>
</span>
<?php } while ($row_members = mysql_fetch_assoc($members)); ?>
</div>`
NB: apologising if I am not clear enough.
I am building a wordpress onboarding plugin.
I have an array that contains the content for each step of onboarding process, then a function that outputs each step in it's own container, with it's own class:
static function action_build_steps() {
$items = Onboarding_Dashboard::dashboard_onboarding_content();
$output = '';
foreach ($items as $step => $item) {
// Classes
$step_class = array();
$step_class[] = str_replace("-", "", $step);
$step_class[] = (isset($item['class']) ? $item['class'] : NULL);
$step_class = implode( ' ', $step_class );
echo '<div id="onboarding_steps_container" class="'.$step_class.' onboarding-'.Onboarding_Setup::onboarding_slug().'" style="left:'.$item['left'].'; top:'.$item['top'].'; width:'.$item['width'].';">';
echo '<div class="onboarding_steps">';
echo '<h2>'.$item['title'].'</h2>';
echo '<p>'.$item['content'].'</p>';
if(isset($item['css_arrow'])) {
echo '<div class="arrow_'.$item['css_arrow'].'"></div>';
}
echo '</div>';
echo '<div class="button_holder">';
if (($item['show-prev'])=='true') {
echo '<button id="prev" class="'.$step_class.'"><i class="fa fa-chevron-left"></i> PREV</button>';
}
if(($item['show-next'])=='true') {
echo '<button onboarding_stage="dashboard" id="next" class="'.$step_class.'">NEXT <i class="fa fa-chevron-right"></i></button>';
}
echo '</div>';
echo '</div>';
}
return $output;
}
This results in showing ALL steps at once, however, the plan is to show one step at a time, and when the user clicks "Next" or "Prev" they see the next or previous step.
I know I need to do this using jQuery but can't think how I will do it, mainly because I have a dynamic number of steps - it's not a set number.
So far, I have just hidden all steps using this script:
jQuery(function($) {
$('.onboarding-<?php echo Onboarding_Setup::onboarding_slug(); ?>').hide();
});
My outputted html looks a bit like this (I'll take out the content)
<div id="onboarding_steps_container" class="step1 onboarding-dashboard" style="left:50%; top:320px; width:500px;">
<div class="button_holder">
<button onboarding_stage="dashboard" id="prev" class="step1 ">NEXT <i class="fa fa-chevron-right"></i></button>
<button onboarding_stage="dashboard" id="next" class="step1 ">NEXT <i class="fa fa-chevron-right"></i></button>
</div>
</div>
<div id="onboarding_steps_container" class="step2 onboarding-dashboard" style="left:50%; top:320px; width:500px;">
<div class="button_holder">
<button onboarding_stage="dashboard" id="prev" class="step2 ">NEXT <i class="fa fa-chevron-right"></i></button>
<button onboarding_stage="dashboard" id="next" class="step2 ">NEXT <i class="fa fa-chevron-right"></i></button>
</div>
</div>
Where you see the word 'dashboard' in the script above, that is also dynamically added depending on the page the user is on. Also, the first step doesn't have a previous button, and the last step doesn't have a next button (they do in my code above, but just for demonstration)
How would I iterate through each step, 1 at a time, hideing the previous step, then showing the next?
UPDATE:
Here is what I've managed to come up with so far:
jQuery(function($) {
var index = 0;
$(function() {
$('.onboarding_steps_container:not(:first)').hide();
$('#next').click(function() {
if (($('.onboarding_steps_container').length - 1) >= index) {
$('.onboarding_steps_container:eq(' + index + ')').hide();
index++;
$('.onboarding_steps_container:eq(' + index + ')').show();
}
});
$('#prev').click(function() {
if (index != 0) {
$('.onboarding_steps_container:eq(' + index + ')').hide();
index--;
$('.onboarding_steps_container:eq(' + index + ')').show();
}
});
});
I think my issue is that each step has a different button (even though the ID is the same a referenced in my script)
});
However, this only works for the first button click, no others
Here's a JSFiddle showing my situation:
https://jsfiddle.net/fwysy2rr/
Make a function in javascript call onclick on next btn
var current_div =1;
function showDiv(var i){
//first hide all div having class onboarding-
//show next div
$(".step"+current_div+1 + "onboarding-dashboard");
//set current div
current_div +=1 ;
}
I am using this jquery popup
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my php and html code in my foreach loop:
<?php foreach($items as $item){ ?>
<a rel="popuprel" class="popup">click hier</a>
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
now when click and show popup only echo one item description for all items but I want echo each item description for each item.
The Javascript:
<script>
function show_description(id)
{
$('desc').fadeOut();
$('#description_' + id).fadeIn();
}
</script>
The PHP/HTML:
<?php foreach($items as $item){ ?>
<a rel="popuprel" onclick="show_description(<?=$this->id; ?>);">click hier</a>
<div class="popupbox" id="popuprel">
<div class="desc" id="description_<?=$this->id;?>">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
I assume you can fetch the ID of your item with "$this->id", that's why I used it in the code.
I found how can do it
i replace all popuprel with this code:
$item->id
it's now work