I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?
You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo
Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
$('div.full').find('img').each(function() {
// your code here ..
});
Related
I am trying to make it so that I can move between two popup images. Either image pops up correctly.
How can I have both the first and second part of the if/else statement to work (how can the right arrow work in both images)?
Prior research I have conducted includes google searches. Most of the following code has been obtained directly from or help by videos on youtube.
$(function() {
"use strict";
$('.postOneImageOne, .postTwoImageOne, .postTwoImageTwo').click(function () {
var $src=$(this).attr('src');
$('.show').fadeIn();
$('.img-show img').attr('src', $src);
});
$('span').click(function () {
$('.show').fadeOut();
});
$('.next').on('click', function() {
// This loops through each img tag
$('img').each(function(){
// Now you can use $(this) to look at each img tag's class
if ($(this).hasClass('postTwoImageOne')) {
console.log('if works');
var $src2 = $('.postTwoImageTwo').attr('src');
$('.img-show img').attr("src", $src2);
} else if ($(this).hasClass('postTwoImageTwo')) {
console.log('else works');
var $src3 = $('.postTwoImageOne').attr('src');
$('.img-show img').attr('src', $src3);
}
});
});
});
$posts.=
"<div class='container'>
<div class='form'>
<img class='profilePicture' src='P2Includes/monkey2.jpg' alt='profilePicture' >
<h1>$title</h1>
<h2>$$price</h2>
<h3>$user_uid</h3>
<h4>$date</h4>
<textarea readonly rows='9' cols='62'>$content</textarea>
<div class='postImageContainer'>
<img class='postTwoImageOne active' src='P2Includes/purplespace.jpg'
alt='postPicture'>
<img class='postTwoImageTwo' src='P2Includes/puppy.png' alt='postPicture'>
</div>
</div>
</div>
<div class='show'>
<div class='overlay'></div>
<div class='img-show'>
<span>+</span>
<div class='previous' id='previous'>V</div>
<div class='next' id='next'>V</div>
<img src=''>
</div>
</div>";
When I try to move to the next image from the first image by clicking the right arrow, I get "if works else works" seven times in the console and the arrow doesn't work. But when I try to click the next right/next arrow in the second image then I get "if works else works" seven times in the console and the arrow does work. Below the JavaScript I am echoing out $posts in a while loop.
I'm trying to use img src as background-image of its parent div (with the same class) with jQuery way, but I need to apply the concrete url of its img child to every div without changing or adding extra classes or id, so that each div parent applies a corresponding different background-image.
My HTML is something like this:
<div class="class">
<img src="url-image-1" />
</div>
<div class="class">
<img src=“url-image-2” />
</div>
<div class="class">
<img src="url-image-3" />
</div>
… and jQuery:
$('.class').css('background-image', 'url(' + $('.class img').attr('src') + ')');
$('.class img').remove();
This code is grabbing the first element (url-image-1) every time; it does not know I want to apply each img to its parent container.
Thanks in advance! (And sorry for my bad english).
You can use
$('.class').each(function(){
$(this).css('background-image', 'url(' + $(this).find('img').attr('src') + ')');
$(this).find('img').remove();
})
The issue is because you're selecting all the .class img elements. Calling attr() on that will only ever get you the first item found in the set.
To fix this, you can provide css() with a function that you can use to find the img related to the current .class element. Try this:
$('.class').css('background-image', function() {
return 'url(' + $(this).find('img').prop('src') + ')');
});
Try each function .And select the children image with children('img')
$('.class').each(function() {
$(this).css('background-image', 'url(' + $(this).children('img').attr('src') + ')');
console.log($(this).children('img').attr('src'))
$(this).children('img').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
<img src="url-image-1" />
</div>
<div class="class">
<img src="url-image-2"/>
</div>
<div class="class">
<img src="url-image-3" />
</div>
My markup is set up like so:
<div class="media-body" >
<h5 class="media-heading">
<strong id="head">{{$blog->Title}}</strong>
<strong id="head2">{{$blog->Title}}</strong>
</h5>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
I have 2 buttons using jquery to show and hide (which act as a show more show less) the two tags within my h5 tag. However I can't seem to use this code to ensure that the strong tag with id="head2" is not displaying. I've tried
<style>
.head2
display:none;
</style>
I've also tried
<style>
strong.head2
display:none;
</style>
Im unsure if this has anything to do with Jquery so ive pasted that in below just in case.
jQuery Code:
$(document).ready(function(){
$("#head").html(function(i, h) {
var words = h.split(/\s/);
return words[0] + ' <span>' + words[1] + ' </span>' +' <span>' + words[2] + ' </span>';
});
});
$(document).ready(function(){
$("#hide").click(function(){
$("#head2").hide();
});
$("#show").click(function(){
$("#head2").show();
});
$("#hide").click(function(){
$("#head").show();
});
$("#show").click(function(){
$("#head").hide();
});
});
You're targeting a class of .head2 in your CSS, but have an id. Use an id # selector instead. For example...
<strong id="head2">{{$blog->Title}}</strong>
#head2 {
display:none;
}
See CSS Selector Reference for more information
I'm trying to use JQuery from inside an iframe to .prependTo a .class div inside the Parent.
This has multiples of the same .class. **EDIT And iframes
Everything is on the same domain.
So, from inside the Main document:
<div class="NewPHOTOS">
**<!--PUT ME HERE!-->**
<div class="LinePhoto">
<a href="images/518279f07efd5.gif" target="_blank">
<img src="images/thumb_518279f07efd5.gif" width="50" height="50">
</a>
</div>
<iframe class="uploadLineID_55" width="800px" height="25px" src="../../uploads/uploadiframe.php" scrolling="no" seamless></iframe>
</div>
Script inside the iframe:
$(document).on("click", '#TEST', function() {
appendImagetoParent();
});
function appendImagetoParent() {
var data = '<div class="LinePhoto"><img src="images/thumb_TEST.gif" width="50" height="50"></div>';
$(".NewPHOTOS", window.parent.document).each(function() { $(data).prependTo($(".NewPHOTOS"));
});
/* $(data).prependTo( $(".NewPHOTOS", window.parent.document) ); This prepends to Every .NewPHOTOS */}
I've been running around in circles and googleing for hours now. I can't figure this out.
What am I doing wrong here?
EDIT
I used, works great!
$(parent.document).find('.' + frameElement.className )
.closest('.NewPHOTOS')
.prepend( data );
$(document).on("click", '#TEST', appendImagetoParent);
function appendImagetoParent() {
var div = $('<div />', {'class':'linePhoto'}),
a = $('<a />', {href:'images/TEST.gif', target:'_blank'}),
img = $('<img />', {src:'images/thumb_TEST.gif', width:'50', height:'50'});
$(parent.document).find('.' + frameElement.className )
.closest('.NewPHOTOS')
.prepend( div.append( a.append(img) ) );
}
Get the class of the containing iFrame with frameElement.className, and use that class to find the right iFrame in the parent document, then find the closest .NewPHOTOS element, and prepend the content, created in a more jQuery'ish way.
I need to find all the images inside a div, and wrap a div around them. Here's the code I come up with, but that's not working! Why?
jQuery(function() {
my_selection = [];
$('.post').each(function(i) {
if ($(this).find('img').length > 1) {
my_selection.push(['.post:eq(' + i + ')']);
}
});
$(my_selection.join(',')).wrapAll('<div class="wrapper"></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
How about something like:
$('.post img').wrapAll('<div class="wrapper" />');
.post img will get a collection of IMG tags within your .post container, and wrapAll applies the DIV around each of them.
The manual page for the wrapAll function actually has quite a close example to what you want.
Hard to say because I can't see your markup but something like:
$('.post img').wrapAll('<div class="wrapper" />');
this works!
$('.post').each(function(){
var container = $(this);
$('img', container).wrapAll('<div class="slideshow" />');
});
Try this
$('.post img').each(function() {
$(this).wrap($('<div/>', { 'class': 'wrapper'}));
});
Here is a link to the similar question I asked :
Create new div arround anchor link when clicked
$('img').each(function (){
$(this).wrap('<div class="new" />');
});
Wrap a div around each img inside a .post:
$('.post img').wrap('<div class="wrapper" />');
Wrap a div around each post that has a img:
$('.post:has(img)').wrap('<div class="wrapper" />');
Move all divs that have an img inside a wrapper div:
$('<div class="wrapper" />').append($('.post:has(img)'));