There is an Image coming from server:
<div class="storyDetail">
<img src="img/photo.jpg" height="180" width="300" style="float:left;">
</div>
Now I want to change this image like this through javascript when page loads:
<div class="storyDetail">
<div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>
</div>
I have tried through Javascript but got nothing because I am not fimilier with Javascript!
I just got the answer with the help of MR.#sinisake.
<!-- Getting Image 'Src' -->
var storyDetailImageSrc= $('.storyDetail').find('img').attr('src');
<!-- Wrapping image with required div(s) -->
$('.storyDetail img').wrap('<a href="'+storyDetailImageSrc+'" class="tt-lightbox">');
$('.tt-lightbox').wrap('<div class="insta-gallery">');
To change text:
Add an id to your div:
<div class="storyDetail" id="storyDetail01">
Define a function:
function changeText {
document.getElementById("storyDetail01").innerHTML =
' <div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>';
return false; }
Place that function wherever you execute Javascript when loading your page.
If not sure about what you do to that purpose, but the easiest -and dirtiest-, is to add a scirpt at the bottom of the html
<body> -> that's your html page body
--- code code...
<script type="text/javascript">
changeText();
</script>
</body>
Related
I am using uikit for my project.
I am loading a html content into a webpage via ajax using the code below. The page is loaded when a select option is selected:
$('.myselect').change(function(){
if($(this).val() == '1'){
$('#ajax-content').load('http://localhost/sites/mysite/items.html');
}
});
The items.html contain the code below:
<div class="uk-child-width-1-3#s uk-text-center uk-grid" uk-grid>
<div>
<div class="uk-cover-container">
<canvas width="400" height="200"></canvas>
<img src="images/img01.jpg" alt="" uk-cover>
</div>
</div>
<div>
<div class="uk-cover-container">
<canvas width="400" height="200"></canvas>
<img src="images/img02.jpg" alt="" uk-cover>
</div>
</div>
<div>
<div class="uk-cover-container">
<canvas width="400" height="200"></canvas>
<img src="images/img03.jpg" alt="" uk-cover>
</div>
</div>
</div>
However, when loaded, the uk-grid, uk-cover and uk-margin does not work properly as margin and column classes (e.g. uk-first-column) are not automatically added.
Is there a way to ensure these are initialized after ajax load?
call following method right after ajax html loaded, updated the codeblock
$('.myselect').change(function(){
if($(this).val() == '1'){
$('#ajax-content').load('http://localhost/sites/mysite/items.html', function(responseTxt, statusTxt, xhr){
UIkit.update(element = document.body, type = 'update');
});
}
});
Im working on a flipbook, and im trying to make my script load when second pages is visible. What i have tried right now is
With if ($('#bubble').is(':visible')) added the bubble script still loads even when i am not on the right page.
Javascript
if ($('#bubble').is(':visible')) {
$(document).ready(function() {
$('.small').fadeOut(1);
$('.small').removeClass('hidden');
$(".small").delay(1000).fadeIn(2000);
});
$(document).ready(function() {
$('.big').fadeOut(1);
$('.big').removeClass('hidden');
// $('.big').fadeIn(1500);
$(".big").delay(2000).fadeIn(2000);
});
$(document).ready(function() {
$('.test').fadeOut(1);
$('.test').removeClass('hidden');
$(".test").delay(3000).fadeIn(2000);
});
}
HTML
<div class="bb-item" id="bubble">
<img class="fixedsize" src="images/1.png" alt="image02" /></a>
<div class="test">
<div class="oval-thought">
<p>Text inside bubble</p>
</div>
</div>
<div class="small">.</div>
<div class="big">.</div>
</div>
I was assigned to do a photo gallery.
A big picture (1000x1000) in the middle, three little thumbnails picture(200x200) below it.
I was given this useful function
getBigImg(thumbnail); // Returns big image
We assume the CSS is already given for us and we do not need to worry.
<div class="big image">
<img src="big picture"/>
</div>
<div class = "thumbnails">
<div id="placement1> img src thumbnail 1 </div>
<div id="placement2> img src thumbnail 2 </div>
<div id="placement3> img src thumbnail 3 </div>
</div>
What I did is simple create 3 copies of the .HTML and do infront of each of the thumbnails. Whenever the user click on the image it will redirects to the .html where the big image is big image of the thumbnail.
I was told I can save all this hassle by using JQuery. What are they referring to?
you can do something like this example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".galImg").click(function() {
var image = $(this).attr("rel");
$('#feature').fadeOut('slow');
$('#feature').html('<img src="' + image + '"/>');
$('#feature').fadeIn('slow');
});
});
</script>
use this HTML: little bug fixes
<div class="big image">
<img class="bigImage" src="big picture"/>
</div>
<div class="thumbnails">
<div id="placement1" > <img src="thumbnail1" /> </div>
<div id="placement2" > <img src="thumbnail2" /> </div>
<div id="placement3" > <img src="thumbnail3" /> </div>
</div>
and add this to your HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '.thumbnails > div', function(){
var img = $(this).find('img').attr('src');
$('.bigImage').attr('src', img);
});
});
</script>
I don't understand why this is not working. I try to send some id of a image when i click on them to a modal. With this id, I change the path of the src of the iframe.
It's work for the first click but after this, it's always the same id if i click on other images
live exemple : http://jsfiddle.net/gRtrX/39/
Images are generate dynamically so i can't use simple id to call her. I just know the src and the id
But the attr doesn't work.
<img src="https://i.ytimg.com/vi/7ZAzp9UtxXo/default.jpg" id="7ZAzp9UtxXo">
<img src="https://i.ytimg.com/vi/hn5gEo_BBOY/default.jpg" id="hn5gEo_BBOY">
<img src="https://i.ytimg.com/vi/DhaGjkTVfIg/default.jpg" id="DhaGjkTVfIg">
<img src="https://i.ytimg.com/vi/gZ_qt7Oo3tE/default.jpg" id="gZ_qt7Oo3tE">
<img src="https://i.ytimg.com/vi/OUEaFKWUiVI/default.jpg" id="OUEaFKWUiVI">
<img src="https://i.ytimg.com/vi/h5cDiLHs2JM/default.jpg" id="h5cDiLHs2JM">
<div id="modal-video" class="reveal-modal small" data-reveal>
<div class="flex-video">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
<!-- end lecteur controles -->
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('img').click(function() {
console.log(this.id);
$(".flex-video > iframe").attr("src", "//www.youtube.com/embed/"+this.id);
$('#modal-video').foundation('reveal', 'open');
});
});
</script>
EDIT : maybe it's a foundation problem, don't understand.
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.