Fancybox works on one page, but not on another - javascript

I have one page where fancybox works,
http://interscript.pl/domy/?p=628
and another where it doesn't. Where is mistake?
http://interscript.pl/domy/?cat=4
EDIT:
<a href="http://interscript.pl/domy/wp-content/uploads/Tulips.jpg" data-title="asdfasdfas dfsad 12341234 23" data-link="" class="fancybox" rel="grupa">
<div class="wpis">
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
<div class="hover"></div>
</div>
</a>
JS: $('a.fancybox').fancybox();

You've applied fancybox to all "a tags " -> $('a.fancybox').fancybox();
But your "image" is not "a" -> http://interscript.pl/domy/?cat=4
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
insert this code in your jquery codes
$(".obszar img").fancybox();
or edit your code such this;
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>

Related

How do I use '.replaceWith' to load data from another html page?

Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.
I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.

Returning data from images in order

I'm quite rusty with my (basic) javascript so hopefully I'm not misunderstanding the problem entirely, but essentially what I'm trying to do is return the 'alt' field of an image as a caption appended to the title for each image, and while I'm getting essentially that, it's returning the list for the entire sequence of images to each instead of their own in a sequence. Code is super simple, which is probably why it's not working. Any help is appreciated
$('#projectThumbs img').each(function(){
$('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
For example, if the images have a caption sequence of '1','2','3', each image is now being appended with '1,2,3' instead of '1' to 1, '2' to 2, etc.
Images structure from the html (in Squarespace so I don't have access to source code, only injection). This is in a grid of images.
ETA: noticed a few hiding divs in the code, maybe the project-item-count can be useful in some way?
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img alt='example'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
image of what's happening to help clarify
$('.project-image img').each(function(){
$(this).parents('.project-image').next().append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example1'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example2'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
Assuming the HTML contains valid #projectThumbs element, the problem is that you're not targeting the .project-title element(s) correctly.
You need to do that using parent() (to find the parent of the element), and then use siblings() to find the correct sibling (which has project-title class assigned).
See the demo below:
$('#projectThumbs img').each(function() {
$(this).parent().siblings('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectThumbs">
<a class='project'>
<div>
<div class='project-image'>
<img alt='example'>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
</div>
The id attribute cannot be duplicated in DOM elements so each function is not run on all the same id elements if you use the class attribute with the same name and use each function then your problem solved.i hope it helps you.
$('#projectThumbs img').each(function(){
$('.project-title').append("<p>" + $(this).attr('alt') + "</p>");
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="projectThumbs">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="mimage"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimag"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
</div>
<div class="project-title"></div>

Getting a link from another div

I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery
$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/
<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});

How to change a div content

I am making a football website where there will be a navigation pane on the left. When you click on one of the tabs, it will bring up the corresponding video, hopefully through javascript. I want this to be done in the same html file, so it doesn't have to reload.
Here is the code for the navigation bar:
<div class="highlights"><a><p>MATCH HIGHLIGHTS</p></a> </div>
<a href="#"><div class="win">
<div class="match"><p>Cardiff</p></div>
<div class="score"><p>1-2</p></div>
</div></a>
<a href="#"><div class="loss">
<div class="match"><p>Everton</p></div>
<div class="score"><p>3-2</p></div>
</div></a>
<a href="#"><div class="win">
<div class="match"><p>Leeds</p></div>
<div class="score"><p>2-0</p></div>
</div></a>
<a href="#"><div class="loss">
<div class="match"><p>Hull</p></div>
<div class="score"><p>2-3</p></div>
</div></a>
and then the content will go inside this div:
<div id="content"> content goes here </div>
make function onclick on each hyperlink like this :
<a href="javascript:;" onclick="showGoals(1);"><div class="win">
<div class="match"><p>Cardiff</p></div>
<div class="score"><p>1-2</p></div>
</div></a>
function showGoals(matchId) {
$.ajax({
success : fumction (data) {
$('#content').val(data);
}
});
return false;
}
I suggest you read up on jQuery. Here's a good reference to change the HTML content, allowing you to add bold, emphasis, etc. jQuery's .html. You may also want to .text works.

Hide a div and show another div in place of it functionality not working for popup

My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">
You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.

Categories