prettyPhoto not working with HTML5 - javascript

I have used following portfolio files,
http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/
and have added prettyphoto in each image tab, but it's not working.
All the library includes are fine.
Here is the code snippet,
under script tag,
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
$("a[rel^='prettyPhoto']").prettyPhoto();
$('a[rel]').each(function() {
$(this).attr('rel', $(this).data('rel'));
});
});
and under body tag,
<li data-tags="Print Design" ><img src="assets/img/shots/1.jpg" alt="Illustration" /></li>
If I remove data-tags in li element, then it's working fine but it's also essential for portfolio functionality.
Please guide me for solution.
Thanks.
--
I changed from
$(document).ready(function(){
to
jQuery(document).ready(function($){
Now I am not getting that $("a[rel^='prettyPhoto']").prettyPhoto is not a function error but still lightbox is not coming.

Related

jQuery image slide show carousel when using ajax

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>

HTML not linking scripts or stylesheets

I'm trying to link jquery and a css file to some HTML and I'm having no luck. The CSS for the page is not styling anything in my browser (Chrome). Also, I've tried putting the script tags in the body and the head (I know this is bad style, I just wanted to try) and I've got console.log()s in my script that aren't logging anything so I know they aren't being linked properly. Can anyone tell me why this isn't behaving?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WLE.css">
<title>w/Way Less Effort</title>
</head>
<body>
<img id="logo" src="WLE.jpg">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
console.log("pre-fade");
$(document).ready(function() {
console.log("fading out");
$("#logo").fadeOut("slow");
});
</script>
</body>
</html>
Replace script with this, abouve body tag :P css link is good but maybe css not work or name is not like u writed.
<script type="text/javascript">
alert("Ist work");
</script>
But and this work if i see good. http://jsfiddle.net/2Fv8f/
I think your code is correct
your file css should nam " WLE.css " i mean with capital letters and should be in the same directory with this html file
.
for JQuery it's linked correctly and its work for me and the Img fade out in my test .
and for test your linked files (images , css , js ) you can do that with any code you write . go to your page in Chrome and :
Click right > Inspecte element > Network (Tab) :
and Refresh the page if any images or files doesn't link correctly it will show in red color .
try and you will see .
I hope that's will help you .

Javascript working only after the whole page is loaded

I have an image slider in my webpage. The slider is made according to the code in the below link.
http://www.htmldrive.net/items/show/37/Dot-Slider-simple-easy-to-use-images-slideshow-jquery-plugins
I have a CSS class and the whole code looks like this.
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#demo2").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_window_width: '256',
slideshow_window_height: '256',
slideshow_title_color: '#FFF',
soldeshow_foreColor: '#999',
});
});
</script>
</head>
<body>
<div class="ads2">
<div id="demo2" class="webwidget_slideshow_dot">
<ul>
<li><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
I have a CGI scripts using Perl that runs for 5 minute. But the javascript is not working for these 5 minutes and image allignment is not clear during this time. After the page is loaded the javascript works fine. However the Javascript part is working fine because I have tested with an alert in javascript code and it works at the start of the page. The problem is when I call the Javascript using div it does not works.
$(/*code*/) is a shortcut for ready() which means that the code in $(/*code*/) won't be executed until the HTML document has been loaded.
Is the 5 minute page load time is for some omitted content after your #demo2 div but before the closing body tag?
The fact that you have wrapped your function in $(...) means it won't be invoked until the entire DOM (Document Object Model) is loaded, parsed and ready.
One thing to try would be to move that script block into the body of the html, after the #demo2 div. Also remove the "$(function() {" wrapper from the code. Not familiar enough with the slideshow widget you are trying to use to know if it will work without the entire DOM being ready, though...

Copy to clipboard using Zclipboard.js not working

I tried Zclipboard.js for copying the value but it didn't work.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js"></script>
<script>
$(document).ready(function(){
$('#copy-description').zclip({
path:'ZeroClipboard.swf',
copy:$('#description').text()
});
});
</script>
<a id="copy-description" href="#" class="">Copy</a>
<p id="description">This should copy</p>
I referred it from this link. I am just getting a copy link with flash player embedded in it. But I cannot click it. What should I change in code, so that I can copy the description text on clicking copy link
I think the problem might be the swf file. Try this. Hope it works
$(document).ready(function(){
$('#copy-description').zclip({
path:'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy:$('#description').text()
});
});
Make sure that the swf is loaded (using Firebug > Network) and that it is located above the link, as well with Firebug. Most likely the first one will solve your problem

jQuery (and all #links) Breaks When I Make Container/Parent Div .fadeIn on pageload - Why?

Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css

Categories