I write a function to append some HTML code to page like below:
function addGiftList(className, imgURL, Kind) {
var $li = $('<li class="' + className + '">');
var $img = $("<img>", { src: imgURL })
var $br = $("<br/>");
var $input = $('<input >', { type: 'radio', name: 'gift', kind: Kind });
var $label = $("<label>").text("Test");
$li.append($img);
$li.append($br);
$li.append($input);
$li.append($label);
return $li;
}
All this will append to a div with className cycle-slideshow then I call $('.cycle-slideshow').cycle();, but nothing happens. Does anyone know why?
Can I create HTML elements with javascript then call jQuery cycle plugin?
HTML
<button>append</button>
<div class="myslider composite-example" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-timeout="2000">
<div>
<img src="http://malsup.github.io/images/p1.jpg" width=100%>
<div class="cycle-overlay">first image</div>
</div>
<div>
<img src="http://malsup.github.io/images/p2.jpg" width=100%>
<div class="cycle-overlay">second image</div>
</div>
</div>
CSS
body {
width: 200px;
margin: auto;
}
img {
width: 200px;
}
JS
// first call cycle
$('.myslider').length > 0 && $('.myslider').cycle();
function addGiftList(className, imgURL, Kind) {
var $div = $('<div class="' + className + '">');
var $img = $("<img>", {
src: imgURL
})
var $input = $('<input >', {
type: 'radio',
name: 'gift',
kind: Kind
});
var $label = $("<label>").text("Test");
$div.append($img);
$div.append($input);
$div.append($label);
// dynamically adding slider: this is a plugin method see documentation
$('.myslider').cycle('add', $div);
return;
}
// dynamic add button for example
$('button').on('click', function() {
// add function for example
addGiftList('myclass cycle-slide', 'https://placeholdit.imgix.net/~text?txtsize=15&txt=image%20added&w=200&h=150&txttrack=0');
})
Please see this link of my codepen. I have solved your problem.
http://codepen.io/prashen/pen/PNPbRR
Related
I have a simple code that switches text when an image is clicked:
js:
$(document).ready(function() {
$('.srb').on('click', function() {
var r = $('.localization').each(function() {
var el = $(this);
var key = (el.attr('caption'));
el.text(srb[key]);
});
});
$('.eng').on('click', function() {
var r = $('.localization').each(function() {
var el = $(this);
var key = (el.attr('caption'));
el.text(eng[key]);
});
});
var srb = {
welcome: 'Добро дошли на наш сајт!'
};
var eng = {
welcome: 'Welcome to our site!'
};
});
HTML:
<span class='localization' caption='welcome'>Welcome to our site!</span>
<img src="img/Serbia.png" value='srb' class="srb" id="flag"/>
<img src="img/United-Kingdom.png" class='eng' value='eng'/>
Is it possible to switch images when language is switched (for example, when English language is set, GB flag disappears)?
Edit html like that
<img src="img/Serbia.png" value='srb' class="image_flag srb" id="flag"/>
<img src="img/United-Kingdom.png" class="image_flag eng" value="eng"/>
add class hidden element
.d-none{
display: none !important;
}
<script>
function activeImageFlag(flagActive){
document.querySelectorAll(".image_flag").forEach(function(flagImage){
flagImage.classList.add('d-none')
});
document.querySelector(".image_flag." + flagActive).classList.remove('d-none')
}
</script>
I am trying to make a popover using bootstrap and placing dynamic content from PHP into it (HTML code).
I have the following code:
<a class="psprn"
href="'.$prnUrl.'"
data-toggle="popover"
data-content="'.$prnName.'"
data-pspicture="'.$prnImage.'"
data-psrank="'.$prnRank.'"
data-psvideo="'.$prnVideos.'">'.$prnName.'</a>
This anchor its a link for users, so I can have 2,3,4 (and so on) users.
This anchor is placed on a 'foreach' Yii app, so he have dynamic content (to have specific image, link, rank, video, content).
I have this js code:
$('[data-toggle="popover"]').hover(function () {
var psrank = $(this).attr("data-psrank");
var psvideo = $(this).attr("data-psvideo");
var pspicture = $(this).attr("data-pspicture");
var pscontent = $(this).attr("data-content");
// console.log(psrank);
// console.log(psvideo);
// console.log(pspicture);
// console.log(pscontent);
$('[data-toggle="popover"]').popover({
trigger: 'hover',
template:
'<div class="ps-placeholder>'+
'<div class="picture">'+
'<img src="prnImage">'+
'</div>'+
'<div class="footy">'+
'<p>$prnName</p>'+
'<span>Rank: $prnRank Videos: $prnVideos</span>'+
'</div>'+
'</div>',
});
});
But something goes wrong. I cannot place the values of data-attributes on the tooltip template.
Infos:
Bootstrap v4.0.0-alpha.4
jQuery v2.2.3
What you currently have won't work. Your variable names get interpreted as strings. You need to replace your " with ` symbol, then you're able to use ${someVariable} within your string.
Here is a basic example.
//Your dynamic content
var catImage = "http://n-z.tv/wp-content/uploads/2017/08/cat-1024x683.jpg";
var message = "Hey this is some dynamic content";
var title = "Some Dynamic Content"
//Create the string and insert it into the body (or the "template" for you)
document.body.innerHTML = `
<div>
<h3>${title}</h3>
<img src="${catImage}"/>
<p>${message}</p>
</div>
`
img {
width: 100px;
}
You could take this a bit further by creating a function that handles this.
let generateDynamicContent = function(title, imageSrc, message){
return `<div>
<h3>${title}</h3>
<img src="${imageSrc}"/>
<p>${message}</p>
</div>
`
}
let dynamic = document.getElementById("dynamic");
let container = document.getElementById("container");
let imageSrcs = [
"https://404store.com/2017/08/19/cat-wallpaper-1024.jpg",
"https://fanparty.ru/fanclubs/cats/gallery/534626_cats.jpg",
"http://n-z.tv/wp-content/uploads/2017/08/cat-1024x683.jpg"
];
let counter = 0;
dynamic.addEventListener("click", function(){
let content = generateDynamicContent(
`Dynamic title #${++counter}`,
imageSrcs[counter%imageSrcs.length],
`Dynamic content #${counter}`
)
container.innerHTML = content;
});
img {
width: 100%;
max-width: 300px;
height: auto;
}
<button id="dynamic">Click me for dynamic content</button>
<div id="container"></div>
I want to create an image object, then a div object, append the image to the div and finally append the result to a wrapper.
I did this:
var image = $(document.createElement('img'));
image.attr('src', url);
image.attr('id', 'preview_gallery_image_' + i);
image.addClass('admin-hotel-gallery-image');
var imageDiv = $(document.createElement('div'));
imageDiv.addClass('col-sm-3');
imageDiv.attr('id', 'preview_gallery_image_wrapper_' + i);
var imageNode = image.appendTo(imageDiv);
var finalElement = imageNode.appendTo("#gallery-wrapper");
To make it a bit clearer, the final result should look like this:
<div id="gallery-wrapper>
<div class="col-sm-3" id="preview-gallery-image-wrapper-1">
<img url="...">
</div>
</div>
What I get is only the image in the gallery wrapper, but the inner imageDiv around the image is missing:
<div id="gallery-wrapper>
<img url="...">
</div>
What am I doing wrong?
DEMO LINK
js code
var url = 'url';
var i =1 ;
var image = $('<img />', {
id:'preview_gallery_image_' + i,
class: 'admin-hotel-gallery-image' ,
src: url
});
var imageDiv = $('<div >',{
id: 'preview_gallery_image_wrapper_' + i
});
image.appendTo(imageDiv);
var finalElement = $('<div/>',{
id: 'gallery-wrapper'
});
imageDiv.appendTo(finalElement);
finalElement.appendTo('body');
result:
<div id="gallery-wrapper">
<div id="preview_gallery_image_wrapper_1">
<img src="url" class="admin-hotel-gallery-image" id="preview_gallery_image_1">
</div>
</div>
I am trying to use image gallery for my website that I found here. I want to add one more functionality to this gallery.. I want a large image to be linked and when clicked on it to open in new tab url that is defined in code.
I have included the full code here:
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to my portfolio';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
});
</script>
And I have 15 thumbnails/photos like this:
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb">
<img alt="" src="images/large/sample1.jpg" class="large_image" rel="Image Sample">
<div class="large_thumb_border"> </div>
<div class="large_thumb_shine"> </div>
</div>
</div>
</div>
<!-- end entry-->
</div>
Any help? Thanks.
This should work, all you have to do is add data-large attributes to each image and on hover it displays a tooltip with the large image inside.
http://jsfiddle.net/DSjLk/
Here in this html i need to get the image name arrow_down using jquery and set it in a variable x.Here in my code after getting the image name i have to use that name in if else condition
<a style="color: #FFFFFF; text-decoration: none;" id="imageDivLink" href="#">
<img name="arrow" class="img-swap" src="Images/arrow_down.jpg" width="13" height="13" border="0" alt="" /></a>
and
$('#imageDivLink').click(function () {
var x = $("img[src$='arrow_down.jpg'][name='arrow']");
if (x == arrow_down) {
$('#MainContent_IFTrendAnalysis').animate({ height: '+=120' }, 500);
}
else {
$('#MainContent_IFTrendAnalysis').animate({ height: '-=120' }, 500);
}
});
Any suggestion?
bart s is mostly right - but to complete the jquery:
$('#imageDivLink').on('click',function () {
var imgName = $(this).find('img').attr('name');
if(imgName === 'arrow_down') {
//do something
}
else {
//do something else
}
}
use attr("src") to get the src attribute.
$('#imageDivLink').click(function () {
var x = $("img[src$='Images/arrow_down.jpg'][name='arrow']");
if (x.attr("SRC") == "Images/arrow_down.jpg") {
$('#MainContent_IFTrendAnalysis').animate({ height: '+=120' }, 500);
}
else {
$('#MainContent_IFTrendAnalysis').animate({ height: '-=120' }, 500);
}
});
I would give the image an ID like below
<img name="arrow" class="img-swap" id="myImage" src="Images/arrow_down.jpg" width="13" heigh="13" border="0" alt="" /></a>
Then using jquery you can grab the attribute name like this
var imageName = $('#myImage').attr('name');
Hope that helps
YOu can use the .attr() function provided by jQuery.
You can create custom attribute & the access it in jQuery.
Example
Then in jQuery
$().jQuery(function(){
var v=$('#id').attr('CustomName');
});
HTML:
<img class="zoom_img" src="images/8.jpg" id="my_img" name="my_img"/>
jQuery:
To get the name by using class name use the below example:
$('.zoom_img').click(function(e){
var fileName = $(this).attr('src');
var fieldName = $(this).attr('name');
alert('FileName : ' + fileName + '\nFieldName : ' + fieldName);
});
To get the name by using field id use the below example:
$('#my_img').click(function(e){
var fileName = $('#my_img').attr('src');
var fieldName = $(this).attr('name');
alert('FileName : ' + fileName + '\nFieldName : ' + fieldName);
});
Note: When using field id, we can get the value either by using field id or this keyword.