Excuse my English.
I tried to use the jQuery Reel Plugin and it works perfectly on my html file.
<img src="DSCN0691.jpg" width="210" height="186"
class="reel"
id="image1"
data-images="fish/DSCN####.JPG|691..702">
But if I add the script through document.innerHTML, it doesn't work at all.
The image will show up, but I can't reel it.
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
I also tried the element.setAttribute(name, value) function,
or loaded the whole html file using jQuery.
But it turns out the same way...
Have no idea what to do now.
Or are there any other solution that I can show and hide the reel image dynamically ?
Thanks a lot.
Down here are the whole script and project.
JQuery Reel Project
<script language="JavaScript">
function WriteToFile(passForm) {
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
}
</script>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='jquery.reel.js' ></script>
</head>
<body>
<div id="Hello"></div>
<input type="button" value="submit" onclick="WriteToFile(this);">
<img src="DSCN0691.jpg" width="210" height="186"
class="reel"
id="image1"
data-images="fish/DSCN####.JPG|691..702">
</body>
The reel plugin is initializing all images with the class "reel" on document load. If you change the HTML Dom afterwards, you need to initialize the added image. You can do this by the following javascript instead:
$('#image').reel({
images: 'fish/DSCN####.JPG|691..702'
});
Related
I try to upload and draw an image into a canvas.
I have the html code for button and canvas and js code for onchange event.
My code does not work and I do not have any errors to figure out what is going on.
The fix is by simply including your scripts at the end of the body before the closing tag </body>.
Your html code will appear like this:
<html>
<body>
<div id="buttonsDiv" >
<input type="file" accept="image/*" title="Upload Image" class="normal-button" id="uploadBtn"/>
</div>
<canvas id= "myImgCanvas" title="Drop an image here to upload" ></canvas>
<script src="myFileName.js"></script>
</body>
</html>
Note that you must pay attention when you should/ should not include your scripts in the <head> tag vs including it at the end of the </body> tag. You can check this post for the best practice.
I've been trying to build an image slide show / carousel using jQuery, and came across colorbox which I thing is really good, and does things the way I want to.
I'm stuck with how to build a slide show of images when using the ajax method they have.
I have six images per item that i'd like to load from the server, and run as a slideshow / carousel just like you see them when you click on the first link on this page under Elastic Transition.
I've succeeded in getting the images to the script using ajax, but i don't end up with a slide show. How can I do this? I currently end up with all the images below each other, and no forward or backward buttons etc.
Can you help?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".ajax").colorbox();
});
</script>
</head>
<body>
<p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p>
</body>
</html>
ajax.html (pulls images and returns it to the script
<div>
<img class="gallery" src='/slide/content/ohoopee1.jpg'>
<img class="gallery" src='/slide/content/ohoopee2.jpg'>
<img class="gallery" src='/slide/content/ohoopee3.jpg'>
</div>
I just could not figure what to do more.
Desired
I would recommend using ajax to add the markup to your document, then assign and open Colorbox to those elements.
An example would be something like this:
<div id='pictures' style='display:none'></div>
<script>
$('.ajax').on('click', function(e){
e.preventDefault();
$.ajax(this.href, {
success: function(html) {
$('#pictures').html(html).find('img').colorbox({href: function(){
return this.src;
}, open:true});
}
});
});
</script>
Intro:
This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie.
What I want to know:
I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed.
What I have done before I came to StackOverflow:
Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image.
Sources:
This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html.
This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/ - on the Lightbox Gallery section.
HTML Structure I have tried, and failed:
<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
</head>
<body>
<div class="popupgallery">
<img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popupgallery').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Note:
I also tried putting the .js files before </body>, again, to not producing intended results.
I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.
I hope someone out there would be kind enough to help me with this query.
Relevant queries:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
Thanks again! I would really appreciate your thoughts!
Just add delegate: 'a' to your jquery function and make sure the img tag contains the full res image while the href contains the thumbnail.
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
Try putting "http:" before backslashes for the .js file source. Also try to use the new version of jQuery, like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
Can someone explain behind the scenes why this Jquery Hover image command doesn't work?
I have seen working examples but I want to know WHY this doesn't work. (improper syntax is not the answer I am looking for)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#banner").fadeIn(1500,function(){
$("#contactBt").fadeIn('slow');
});
$("#contactBt").hover(function(){
$("#contactBt").css("src","images/contactBtHover.png");
},function(){
$("#contactBt").css("src","images/contactBtNoHover.png");
});
});
</script>
</head>
<body bgcolor=212121>
<div style="margin-top:15%; margin-left:10%" >
<img id="banner" style="display:none;" src="images/banner.png" width=1000 height=275/>
</div>
<img id="contactBt" style="display:none; margin-top:0%; margin-left:10%" src="images/contactBtNoHover.png" width=250/>
</body>
Basically I just want it to say when the mouse is hovering over the image change its image source to a different image. Vice Verse on the way back
That would be:
$("#contactBt").attr("src","images/contactBtHover.png");
as src is an attribute, not a style.
i am having some loading problems with my slider. http://www.novaprogramming.com Sometimes it loads, and sometimes it does not. I really do not know why.
Your site render like this
<img src="nivo/images/02.png" alt="">
Try the img tag like this
<img src="/nivo/images/02.png" alt="">
In your page remove this code
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
its not needed