How to change effects in Cycle 2? - javascript

I'm using cycle2 plugin for my website to change images in background. I need to change effect from tileBlind to scrollVert by clicking on button. This is what i created, but it's not working at all.
<div class="cycle-slideshow"
data-cycle-timeout=5000
data-cycle-fx="tileBlind" //here i need change it to data-cycle-fx="scrollVert"
id = "sli">
<img src="img/bg1.jpg" alt="background1">
<img src="img/bg2.jpg" alt="background2">
<img src="img/bg3.jpg" alt="background3">
</div>
<button type="button" onclick="fun1()" id="button1">click</button>
js:
function fun1(){
var slide = document.getElementById('sli');
var slide_data = slide.getAttribute('data-cycle-fx');
slide.setAttribute("data-cycle-fx","scrollVert");
}
I'm relatively new in programming, so i don't know how to fix it.

Related

How show different random Image with button without restarting the page?

i want my popup (when a button is clicked) to show a random image out of my folder each time i click the button. I used html, css and javascript for my website.
The problem: it is the same random image each time. Only if i restart the page a different random image is showed.
What works right now: when i click the start-button a popup with a random image from that folder shows up (just how i want it) but if i click the close-button on my random picture and press the start-button again the same picture pops up again. Only if i restart my page then a new random picture will show when i press the start-button. But that picture stays the same, when i close the popup and want to start it again.
I want a random image everytime when i press the start-button without having to restart the page.
Do i use a boolean in javascript? Can i restart the function on its own? I have seen similar questions all the time but none of the solutions have worked for me kinda.
(the start-button is also a picture but it is a button) Sorry if the code is weirdly formatted, i am new to code <3
Thank you!!
My code:
HTML:
<div class="popup" id="popup-1">
<div class="overlay"> </div>
<div class="content">
<img class="imagelook"/> <!-- image is start-button -->
<div
class="close-btn"
onclick="togglePopup()"
onclick="generateRandomPicture(array)">× <!-- random image from folder -->
</div>
</div>
</div>
<body>
<button type="button" onclick="togglePopup()" class="imglook"></button> <!-- the start-button -->
</body>
Javascript:
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
const imageArray =[
"zettel/9.png",
"zettel/8.png",
"zettel/10.png",
"zettel/11.png",
"zettel/12.png",
"zettel/13.png"
];
const image = document.querySelector("img");
window.onload = () => generateRandomPicture(imageArray);
function generateRandomPicture(array){
let randomNum = Math.floor(Math.random() * imageArray.length);
image.setAttribute("src", imageArray[randomNum]);
}
Perhaps the following might help - coded to allow for multiple popup elements in conjunction with multiple button elements to trigger the display of different images in the respective popup div
const images = [
"zettel/9.png",
"zettel/8.png",
"zettel/10.png",
"zettel/11.png",
"zettel/12.png",
"zettel/13.png"
];
const _CN='active';
const bttnclickhandler=function(e){
// generate random image based upon array
let imgsrc=images[mt_rand(0,images.length-1)];
// assign image the new src
this.previousElementSibling.querySelector('img').src=imgsrc;
this.previousElementSibling.classList.add(_CN);
console.info(imgsrc)
};
const closeclickhandler=function(e){
e.target.closest('.popup').classList.remove(_CN);
this.previousElementSibling.src='';
console.clear();
};
// generate a random number between a & b
const mt_rand=(a,b)=>Math.floor( Math.random() * ( b - a + 1 ) + a );
// assign listeners to all pertinent elements
document.querySelectorAll('button.imglook').forEach(n=>n.addEventListener('click',bttnclickhandler));
document.querySelectorAll('div.close-btn').forEach(n=>n.addEventListener('click',closeclickhandler));
document.querySelectorAll('div.popup').forEach(n=>{
n.querySelector('img').src=images[mt_rand(0,images.length-1)]
})
.active{background:pink}
.popup{margin:1rem;}
.imglook{padding:1rem}
<div class="popup">
<div class="overlay"></div>
<div class="content">
<img class="imagelook" />
<div class="close-btn">×</div>
</div>
</div>
<button type="button" class="imglook"></button>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<img class="imagelook" />
<div class="close-btn">×</div>
</div>
</div>
<button type="button" class="imglook"></button>

simple slide show in JS- buttons are not working properly

I want to create a basic page in html that displays a single image.
I also added two buttons Previous and Next. These buttons should allow the user to move forward or backward. Have 6 images in total. When the user reaches the end (or beginning when clicking on the back button) of the slide show, the slide show should not wrap around to the beginning (or end).
button onclick function for both the cases is not working. Its only getting displayed the first image as what mentioned in the img src attribute.
This is what I have done so far. I put all the images into an array and try to travel the array forward and backward side based on the button click.
<body>
<img src="img1.jpg" id="demo" style="width:400px;height:600px"/img>
<br/>
<input type="button" onclick="preImage()" value="Previous
">
<input type="button" onclick = "nextImage()" value="Next
">
<script>
var slider_content = document.getElementById("demo");
var image = ['img1','img2','img3','img4','img5','img6'];
var i = image.length;
function nextImage(){
if(i<image.length){
i=i+1;
}else{
i=1;
}
slider_content.innerHTML="<img src="+image[i-1]+".jpg>";
}
function preImage(){
if(i<image.length+1 && i>1){
i=i-1;
}else{
i=image.length;
}
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
}
</script>
</body>
Create a wrapper div to your image and change the innerHTML of the div.
<div id="demo" style="width:400px;height:600px">
<img src="img1.jpg">
</div>
An error needs to be corrected in the preImage function:
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
to
slider_content.innerHTML = "<img src="+image[i-1]+".jpg>";
and also what Daniel said.

Onerror event add a new class and count how many times it replaces image source

I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>

Pictures in html page dont load, unless you hover over

The home page of my site has a container that holds square boxed with an image and a title. I changed some of those tiles to .gif images so once you hover over the image changes to another. There is not title anymore. The issue is when I load the page, the pictures that are gif do not load unless I hover over them. Once I hover over all, and do a page resize they all look fine.
Could it be because of the page resize function?
http://geranbaha.com/indextest.html
Can someone point out what I am doing wrong.
<script language="JavaScript">
<!-- Hide the script from old browsers -->
img0_on = new Image(311,235);
img0_on.src="upload/ketabmoghadas.gif";
img0_off = new Image(311,235);
img0_off.src="upload/ketabmogadasWeb.gif";
img1_on = new Image(311,235);
img1_on.src="upload/divine.gif";
img1_off = new Image(311,235);
img1_off.src="upload/divineculture.gif";
img2_on = new Image(311,235);
img2_on.src="upload/tv.gif";
img2_off = new Image(311,235);
img2_off.src="upload/rozaneh.gif";
img3_on = new Image(311,235);
img3_on.src="upload/radio.gif";
img3_off = new Image(311,235);
img3_off.src="upload/radio1.gif";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
//<! --End Hiding Here -->
html section
the commented part in this section is what it used to be and I replaced it with one line html code to show the gif images.
<div class="project-post web-design illustration">
<img src="ketabmogadasWeb.gif" border="0" name="img0">
<!-- <img alt="" src="upload/divineculture.jpg">
<div class="hover-box">
<div class="project-title">
<h2>فرهنگ الهی</h2>
<span>www.divine-culture.com</span>
<div><i class="fa fa-arrow-right"></i></div>
</div>
</div> -->
</div>
Put all of your javascript in
$( document ).ready(function() {
// Put all your image stuff here
});
And remove onmouseover="over_image('img0');" onmouseout="off_image('img0')"
Those onmouseover functions is what makes it change on a hover.

click handler in capty plugin

I am trying this JS code in jquery capty plugin . However the plugin needs an image to works, like:
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
Well, when i add this image the JS below didn't works. Basically what i want is just click in span and show an alert message with the content.
$('.tag_content').live('click', function(event){
var span_val = $(this).parent().children("span").html();
alert(span_val);
});
html code
<div class="images">
<img id="default1" src="img/1.jpg" name="#content-target1" width="208" height="143" class="latest_img" />
<div id="content-target1">
<span class="tag_content">Design</span>
</div>
</div>
Any idea ? thanks
The following code seems to work for me. You can try it out on jsFiddle: http://jsfiddle.net/fZSGt/4/
$('#default1').capty();
$('.tag_content').click(function() {
//var span_val = $(this).parent().children("span").html();
var span_val = $(this).html();
alert(span_val);
});
I also changed $(this).parent().children("span").html() to $(this).html() because it seems to be unnecessary for your code.

Categories

Resources