<img id="Img1" class="photoBox" src="Images/DisplayImageById.ashx?number=1&userName=<%=Page.User.Identity.Name %>"/>
<img id="Img2" class="photoBox" src="Images/DisplayImageById.ashx?number=2&userName=<%=Page.User.Identity.Name %>"/>
<img id="Img3" class="photoBox" src="Images/DisplayImageById.ashx?number=3&userName=<%=Page.User.Identity.Name %>"/>
<img id="Img4" class="photoBox" src="Images/DisplayImageById.ashx?number=4&userName=<%=Page.User.Identity.Name %>"/>
<img id="Img5" class="photoBox" src="Images/DisplayImageById.ashx?number=5&userName=<%=Page.User.Identity.Name %>"/>
I have been looking for a way to show a spinning icon until the images load without using ajax? I am researching how to load images using ajax but it wasn't going to well so I started looking for a way to do this without ajax. Is that possible?
Thank you for any help.
Check this. This is done using jQuery's load event, which tells when a specific element is being loaded, in your case, img
http://jsfiddle.net/blackpla9ue/uJhCt/1/
$(function(){
$('div img').each(function(){
var thisImage = $(this);
thisImage.hide(0)
.load(function(){
$(this).show();
});
});
Note that this would not work if you put your code inside $(document).ready(function(){ ...});
Related
I want to change the set of 5 image on page refresh called in html.
the images should called this under the body tag:
<img src="images/side-logos/1.jpg" alt="">
<img src="images/side-logos/2.jpg" alt="">
<img src="images/side-logos/4.jpg" alt="">
<img src="images/side-logos/5.jpg" alt="">
I want to called the set of images under the body tag not in javascript.
I have searched a lot on website but everyone calling the image in javascript not under the body tag.
So Please help me if anyone has the solutions for it.
just replace onclick event with window refresh event
HTML
<div id="box">
<img id="image" />
</div>
<br />
<input type="button" value="Randomize!" onClick="randImg()" />
JS
var images = [
"http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}
randImg();
demo
EDIT
new_demo
Unfortunateley, you can only do this with javascript.
To do that, here is some code that is placed in the tags
<script type="text/javascript">
function Randomize() {
var images = new Array("one.jpg","two.jpg","three.jpg","four.jpg");
var imageNum = Math.floor(Math.random() * images.length);
document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}
window.onload = Randomize;
</script>
The name of the images shoukd be in the images array and the "divid" is where you want the images to appear.
I'm using the jQuery plugin Masonry and I'm having an issue that happens when I make an ajax call to another page to load in images for a gallery. The ajax call works and the images load in but when the call is made, something happens that removes one of the classes that Masonry appends too one of my divs.
Here is how my html looks on the first page. Everything is fine here and shows the class masonry-brick, which I need to render out the appropriate css to make everything look nice and it also renders out the inline css.
<a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
**<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
<div class="gallery-text">
<h3>Berkshire</h3>
<p>HDP – High Definition Porcelain</p>
</div>
</div>
</a>
When I click on the link to make the ajax call, the images load in fine and it works on all the links but the class masonry-brick is removed and the images lose their css.
jQuery("#project-galleries-navigation li.load-category a").on("click", function(){
var href = jQuery(this).attr("href");
jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);
return false;
});
This is the code i'm using for masonry.
var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true
});
});
This is what ends up happening to my html when the page loads in the new data. The class masonry-brick is no longer present and the inline css disappears as well.
<a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
**<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
<div class="gallery-text">
<h3>Ashton</h3>
<p>Porcelain</p>
</div>
</div>
</a>
Has anyone had this problem or knows a way to fix this issue?
I was able to get it to work by modifying this jquery and putting in a callback function for it.
jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
jQuery("#gallery").masonry("reload");
}).fadeIn(2300);
e.preventDefault();
});
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>
I have a simple html page and I want to make a very simple gallery to it with fancybox.
Here is the code for one image:
<a class="gallery" href="img/83.jpg"><img src="img/83k.jpg" alt="" /></a>
Problem is, I have 400 of them and I have to make it sequential, like:
<a class="gallery" href="img/84.jpg"><img src="img/84k.jpg" alt="" /></a>
<a class="gallery" href="img/85.jpg"><img src="img/85k.jpg" alt="" /></a>
etc...
Hand coding it would be such a pain.
How can I generate all of it?
Thanks!
Create a container where you want to generate your galleries like:
<div id="galleries"></div>
then use this code:
$(document).ready(function(){
var i = 83; // select your initial number
for (i=83; i<=483; i++){ // loop as many images as you need
$("div#galleries").append('<img src="img/' + i + 'k.jpg" alt="" />');
} // for
// and set your fancybox script afterwards
$('.fancybox').fancybox({
// fancybox options
}); // fancybox
}); //ready
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.