There's a lot of examples about how to reload captcha image on clicking, they all have a 'captcha.php' as the image source, e.g.
<img id="captcha" src="captcha.php">
<a id='reload'>Refresh now</a>
$('#reload').click(function(){
$('#captcha').attr('src','captcha.php')
})
The image source in OpenCart in my form is
<img id="captcha_img" src="index.php?route=information/contact/securimage" alt="CAPTCHA Image" />
If I do this:
<script>
$(function() {
$('#captcha_img').click(function(){
$('img').attr('src', '<?php echo "index.php?route=information/contact/securimage" ?>?' + (new Date).getTime());
});
});
</script>
The first image loads, but when I click on the image, the new image doesn't load. Looks like I'm not specifying the correct URL. What path do I need to set in the script in OpenCart? Thank you.
<script>
$(function() {
$('#captcha_img').click(function(){
$(this).attr('src', '<?php echo "index.php?route=information/contact/securimage" ?>&time=' + (new Date).getTime());
});
});
</script>
Is that works?
Related
I am building a WordPress template and have created a contact form, I want the submit button to be replaced with a loading GIF image on click. Previously on a static html I used the jquery code below to do it.
/* ==============================================
Contact Form
=============================================== */
$('form[name="contact-form"]').submit(function(e) {
e.preventDefault();
$("div.submit").html('<img class="loading" src="assets/images/loading-infinity.GIF" alt="" />');
/*
more code goes here
*/
});
To insert images on the template I use <img src="<?php bloginfo('template_url'); ?>/images/myimage.jpg" alt="">: I use this on template parts of course. So I thought my jquery would look something like this:
/* ==============================================
Contact Form
=============================================== */
$('form[name="contact-form"]').submit(function(e) {
e.preventDefault();
$("div.submit").html('<img src="<?php bloginfo("template_url"); ?>/images/loading-infinity.GIF" alt="" />');
/*
more code goes here
*/
});
However the path to the loading image is still broken? How can I fix the path to the image?
Do something like this
var src = "<?php bloginfo('template_url'); ?>/images/loading-infinity.gif"
$("div.submit").html('<img src="'+src+'" alt="" />');
This will work for you
$('form[name="contact-form"]').submit(function(e) {
e.preventDefault();
$("div.submit").html('<img src="<?php echo bloginfo("template_url"); ?>/images/loading-infinity.gif" alt="" />');
});
You got broken link because you have used " in your code. Try below code instead of bloginfo():
$('form[name="contact-form"]').submit(function(e) {
e.preventDefault();
$("div.submit").html('<img src="<?php echo get_template_directory_uri() ?>/images/loading-infinity.GIF" alt="" />');
});
I have a function in jquery which displays images on link click and also has to hide the image when the link is clicked again.
This is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.links').click( function(){
var linkclicked = this.id;
var url = $j(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$j('#image-holder'+linkclicked).empty().append(image);
/* The above line shows the image on first click.
Adding slideToggle hides the image again */
};
image.onerror = function () {
$j('#image-holder'+linkclicked).empty()
.html('That image is not available.');
}
$j('#image-holder'+linkclicked).empty().html('Loading...');
return false;
});
});
function loadnow() {
}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>
Please let me know where to write slideToggle as to enable show/hide function properly. There are two links here which show separate images. They are shown when clicked but the problem is to hide them on next click and make them
visible when clicked again and so on.
The way you have your code here is not really quite right for .slideToggle. You should not put the URL for the image in the href attribute of an <a> element because the link will try to go there on click.
The way .slideToggle works is well documented on the docs page. All you have to do is use the HTML <img> tag, which is made to hold images. Then you $().hide(); them when the page loads so they aren't shown. All you have to do them is call the .slideToggle() function on the link click event.
See the working example with some misc pictures in this fiddle: http://jsfiddle.net/8xcZT/5/.
Or here is a working version of your code: http://jsfiddle.net/JMXba/9/. I can see this may be desirable to wait for the click to load the image.
Good Luck!
I am working in php on when user click image when it will redirect to another link then i need change image here is my code
<script type="text/javascript">
$(document).ready(function() {
$("#cards").click(function() {
d = new Date();
$("#cards").attr("src","http://ifliptips.com/admin/VueGuides/images/ifliptips_hover.jpg?timestamp=" + new Date().getTime());
$("#tips").attr("src","http://ifliptips.com/admin/VueGuides/images/iflipcards.jpg");
$("#registeruser").attr("src","http://ifliptips.com/admin/VueGuides/images/reg_users.jpg");
});
});
</script>
<?php
$redirect=REDIRECT;
$path=$redirect."/images/iflipcards.jpg";
?>
<li class="active">
<a href="quizcatagory.php" id="quizcatagory">
<img id="cards" style="padding-top:15px" width=70 height=18 src=<?php echo $path; ?> />
</a>
</li>
How can I change image after page reload?
Thanks in advance.
url = "cardcatagory.php";
$(location).attr('href', url);
The code above redirect your page to another link. Try below.
$(document).ready(function () {
$("#quizcatagory").click(function () {
d = new Date();
$("#cards").attr("src", "http://ifliptips.com/admin/VueGuides/images/ifliptips_hover.jpg?timestamp=" + new Date().getTime());
$("#tips").attr("src", "http://ifliptips.com/admin/VueGuides/images/iflipcards.jpg");
$("#registeruser").attr("src", "http://ifliptips.com/admin/VueGuides/images/reg_users.jpg");
return false;
});
});
You are already setting the image with a PHP variable
<img id="cards" style="padding-top:15px" width=70 height=18 src=<?php echo $path; ?> />
Just change the image on the server side. Unless you are speaking of the image urls in the JavaScript, then you can either make their values PHP variables and set that from the server or you can create a PHP file that returns an image and put all the necessary logic to determine what image to display from there. (http://php.net/manual/en/function.imagejpeg.php)
I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below
I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images
when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt'}
});
});
});
Further pass it to the php file now here i m facing a problem what i need at the moment is
that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs
Here's the jquery code that should work:
<script>
$(function () {
$(document).on('click', 'div.prodcls img', function (e) {
e.preventDefault();
window.open($(this).attr('src').replace('/thumbnails', ''), '');
});
});
</script>
And some css for good measure:
<style>
div.prodcls img:hover {
cursor: pointer;
}
</style>
Here's a working fiddle: http://jsfiddle.net/DenGp/
Css:
#imagePopup{ float:left; z-index:10; position: absolute;}
Add some positioning
HTML:
<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>
JS:
$('.prodcls').click(function(){
var src = $(this).attr('src').replace('/thumbnail', '');
$("#imagePopup").html("<img src='"+src+"'/>")
$("#imagePopup").toggle();
});
Updated answer:
HTML: (give every image a link):
<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>
showImage.php:
$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;
You can open actual image in new browser tab without jQuery:
For Example:
<div id="prodoneid" class="prodcls">
<a href='images/zara1.png' target='_blank'>
<img src="images/thumbnail/zara/1.png" alt="ZARA"/>
</a>
</div>
Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/
You have an error in your AJAX code (your forgo to include the actual var:
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt':txt} //added :txt here
});
});
});
Now in PHP:
$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.
My jQuery code:
$('.Img').click(function() {
alert('Test');
});
$().ready(function() {
$.ajax( {
type : 'POST',
url : 'Post.php',
success : function(Response) {
$('#Response').html(Response);
}
}
});
My HTML code:
<div id="Response"></div>
<img class="Img" src="blank.gif" /> [Click Trigger]
My PHP code:
echo '<img class="Img" src="blank.gif" />'; [Ajax from response]
why this image does not trigger from AJAX response?
You need to use .live() here, like this:
$('.Img').live('click', function(){
alert('Test');
});
It doesn't work currently because $('.Img') doesn't find the <img> to attach a click handler to...it didn't exist then, not until the ajax call loaded it, .live() will listen for the click appropriately, even if the element is added later.