I have an image in a div given below that appears on every page of my website and I have a URL link available to me that contains a profile picture. I would like to replace the image src attribute and update the profile picture and make sure that it updates on every other page. Any suggestions on how I can achieve this using javascript/jquery? Kindly let me know.
Test image URL: http://www.hdrspotting.com/images/default_profile.jpg
<div id="d2c-hey-user" class="d2c-user-panel" style="display: block;">
<img src="../images/defaultHeadshot_lg.png" style="display:none;" class="pacific-header-user-img">
</div>
Related
I have an image gallery, each gallery item has the picture, a title, and description. I want to be able to click on any of these gallery items and have a "detail" page load and fill in dynamically the image, title, and description. How can I do this?
I tried getting each of the values inside the divs with.innerHTML, but how do I "send" these values to the other HTML page?
You can see exactly what I want here:
http://madebymorro.com/web_majosecastano/nieve.html
This is the image gallery, only 1 item is active, the first one under "2008".
You can see that when you click on it, a detail page opens:
http://madebymorro.com/web_majosecastano/detalle.html
This is what I want to achieve, but not having to create a detail page manually for each one of the image gallery items. I want the detail page to fill in with the info coming from the galley HTML page.
Thanks!!!
Convert your pages into php and create only one detail page when you click on any gallery item pass the id or title of that gallery in tag and access that id using url query parameter or any other method
<div class="row">
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=1">
<img src="random-img.jpg"></img>
</a>
</div>
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=2">
<img src="random-img.jpg"></img>
</a>
</div>
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=3">
<img src="random-img.jpg"></img>
</a>
</div>
</div>
and in detail-page.php access id using query paremeter and then access result using id and print in detail page
To access id using query parameter add code in detail page like this
<?php $galleryId= $_GET['id']; ?>
here you will get gallery id
In this html There is div which contains a background image. and inside it there is a mark img. working good on browser but at the time of print background image not coming still mark is coming
<div id="picx" style="background:url(img/large_eyeball.png);">
<img id="picx" src="img/cross.png">
</div>
I have also checked option of background color and image option in print preview settings. Please explain me what is going wrong.
I am using Google chrome. following function to print page.
<script>
function myFunction() {
window.print();
}
</script>
Try background-image instead of background
<div id="picx" style="background-image:url(img/large_eyeball.png);">
<img id="picx" src="img/cross.png">
</div>
In my case i want to change the href image icons when the user comes to contact us page. But those images are loaded from header file and i want to change the image path when it comes to contact us page.
<div class="header_nav_buttons" style="width: 25%;">
<div id="first_img" style="float: left;margin-right: 3px;">
<a href="cth/support.php"><img src="cth/theme/boxxie/pix/tech_support.png"/><a>
</div>
<div id="second_img">
<a href="cth/contact.php">
<img id="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
</div>
</div>
And i tried this Jquery codes.
$('#contact_blue_icon').each(function(){
//Change the src of each img
$(this).attr('src','cth/theme/boxxie/pix/blue_contact.png');
});
Any helps would be appreciated.
'contact_blue_icon' is an Id. It is an unique element
Try with full image path
$('#contact_blue_icon').attr('src','http://image_path');
Since id is unique, you need to use class instead for your images:
<img class="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
So you need class="contact_blue_icon" not id="contact_blue_icon"
My website contains the following code:
<ul class="thumbnails1">
<li>
<img src="~/Images/man1.jpg" alt="n/a"/>
</li>
</ul>
<input type="button" value="See More" onclick="OnSeeMore()"/>
<script type="text/javascript">
function OnSeeMore() {
$('.thumbnails1').prepend('<li><img src="~/Images/man1.jpg" alt="n/a"/></li>');
}
</script>
The original image appears well, but when i click "See More" button, I can see the list item is dynamically added, but the image shows the "alt" text n/a instead of the "man1.jpg" image. so what am I doing wrong?
I basically try to copy google's image search behavior, by showing only some of the images in the DB and then show more upon request.
~/Images/man1.jpg is a server-side relative path. If you are adding the node on the client side, you need to use /Images/man1.jpg assuming the Images folder is in the root folder for your site.
The relative path:
<img src="~/Images/man1.jpg"
Should be "resolved" on the server, if you add it on the client as is, the path is invalid.
Why does your URL include a ~? It should not use some linux specifc path since that is not a URL. It should be the path to get to it from the webserver, not the file system.
<!-- Relative -->
<img src="./Images/man1.jpg" alt="n/a"/>
<!-- Absolute -->
<img src="/Path/to/my/directory/Images/man1.jpg" alt="n/a"/>
I've got a body background image that is being "placed" by a plugin called ezBigResize that basically allows the image to scale with the browser window.
The designer wants to image though to be able to be swapped out by a series of thumbnails on the page, along with that image being randomized on page load from that series of images.
Initially before those two additions, I just had it setup like this:
$(document).ready(function() {$("body").ezBgResize({img : "/lib/img/bkgr/mainBG.jpg"});});
Then this is the code now (in a jQuery Tools scrollable)
<div id="bkgrSelector">
<div class="scrollNav">
<a class="prev browse left"></a>
</div>
<div class="scrollable">
<div class="items">
<img src="/lib/img/bkgr/selections/main-bg.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg02.jpg" width="77" height="44" />
<img src="/lib/img/bkgr/selections/main-bg03.jpg" width="77" height="44" />
</div>
</div>
<div class="scrollNav">
<a class="next browse right"></a>
</div>
</div>
I'm a little over my head though to allow these to both randomize on page load and to swap out the image via the value in the href.
I tried something like this, but it didn't work and is obviously inclomplete. Plus, it doesn't address the randomization at all.
$('#bkgrSelector .items img[href]').click(function()
{
$("body").css("background-image", "url()");
});
Any ideas, help, etc. would be appreciated.
Are those <img> pointing at the full-sized image file? I absolutely LOATHE sites that use full-size images and shrink them to thumbnail size. The load times are attrocious.
If they're actually thumbnail-sized images, you won't be able to use that url directly as your background url, as you'd just be stretching a small thumbnail-sized image to cover the window and get a hideous pixelized mess.
If the page is being dynamically generated, you'd want to create a JS array that contains the URLs of the full-sized image urls, so that when a thumbnail is clicked, you can get the fullsize url from that array. Or at least have a standardized naming convention so a simple string manipulation lets you turn the thumbnail url into a fullsize image url.
Once you've got that array, it's a simple matter to randomize a choice from it:
var imgs = ['/url/for/img1.jpg', '/url/for/img2.jpg', etc....];
$(document).ready(function() {
randomUrl = imgs[Math.round(Math.random() * (imgs.length - 1)) + 1];
$("body").css("background-image", 'url(' + randomURL + ')');
});