Jquery/Javascript changing img SRC with IF/ELSE statement

Jquery/Javascript changing img SRC with IF/ELSE statement - javascript

i am pretty new to javascript and I am not able to get an IF/ELSE statement to work in a kind of basic configurator I am experimenting, I am sure there's something dumb I am doing.
I have a main image that changes to show the result of a selection, the problem is that the IF statement doesn't seem to work properly, like if it wasn't going through the conditions: basically when selecting a color (black/silver) there are no problems, but when clicking on inserts it should change scr performing the if/else test to change the scr attribute accordingly.
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
Here is a fiddle to help you help me:
https://jsfiddle.net/1qdwaa8o/
and a snippet:
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
body{
background-color:black;
padding:0;
margin:0;
border:0;
text-align:center;
}
.main{
width:432px;
height:422px;
position:absolute;
display:inline-block;
margin-left:-216px;
margin-top:10%;
}
#img_wrapper{
width:350px;
margin-left:41px;
}
#selector_wrapper{
width:auto;
}
.selector_button{
width:50px;
height:50px;
border-radius:25px;
border:1px solid #1C1C1C;
margin: 0 10px;
cursor:pointer;
}
.clear{
clear:both;
}
#case_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
#case_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_wood{
background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
float:left;
}
#insert_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div id= "img_wrapper">
<img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
</div>
<div id= "selector_wrapper">
<div id= "case">
<div class= "selector_button" id= "case_black"></div>
<div class= "selector_button" id= "case_silver"></div>
</div>
<div class= "clear"></div>
<div id= "inserts">
<div class= "selector_button" id= "insert_black"></div>
<div class= "selector_button" id= "insert_silver"></div>
<div class= "selector_button" id= "insert_wood"></div>
</div>
</div>
</div>
</body>

img is a jQuery object, therefore img.src will be undefined.
You need to test img[0].src or img.prop('src').

Get/set src of image using img.attr("src") and not img.src
Or you can make use of: img.get(0).src. img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src;

Related

how to remove single uploaded file from jQuery in multiple file upload

I've searched everywhere and still don't get what I want.
I've following input field.
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
I've made image preview and on a remove button click, image preview is removed. In this case, I want to remove uploaded image from file upload field as well. Is there any way to achieve this.
I've found a way to remove all uploaded files but not a particular image.
Any kind of help is appreciated and if you need further information then feel free to ask.

I have a example delete image hope it will help you.
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
var htmlImage = '<div>';
htmlImage = htmlImage + '<img src="'+event.target.result+'" />';
htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />';
htmlImage = htmlImage + '</div>';
$($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
function removeImage(item) {
//alert(item);
item.parent().remove();
}
$('#photo-gallery').on('change', function() {
imagesPreview(this, 'div.gallery');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
<div class="gallery"></div>
</div>
</div>

I wrote this code fast, hope it help
if it was what you need and you need help, I will do
var files=[];
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
$(this).val('');
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span>x</div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
body{
font-family:arial;
}
#result{
margin:4px 0;
}
.img-div{
position:relative;
display:block;
width:200px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
</body>

this is the full example and I tested it and it works
sure you cant test upload here but try it in your local server
var files=[];
$("#photo-gallery").change(function(){
for(var i=0;i<this.files.length;i++){
files.push(this.files[i]);
}
refreshFiles();
});
function refreshFiles(){
for(var i=0;i<files.length;i++){
$("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span>x</div>');
}
}
$(document).on('click','.delete-image',function(){
var id=parseInt($(this).attr("image-id"));
files.splice(id,1);
$("#result").empty();
refreshFiles();
});
$(document).on('click','a',function(){
if($(this).attr("href")==="#"){
return false;
}
});
$(document).on('click','#submit',function(){
if(files.length===0){
return false;
}
var fd=new FormData();
for(var i=0;i<files.length;i++){
fd.append('img_'+i,files[i]);
}
$.ajax({
url:"upload-images.php",
method:"post",
cache:false,
dataType:'json',
processData:false,
contentType:false,
data: fd,
success: function(data){
console.log(data);
}
});
});
.img-div{
position:relative;
display:block;
width:300px;
height:40px;
line-height:40px;
margin:4px 0;
border:1px solid #999;
border-radius:6px;
padding:0 8px;
}
.delete-image{
position:relative;
display:inline-block;
float:right;
height:40px;
line-height:40px;
margin-left:20px;
text-decoration:none;
padding:0 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group gallery-add-button">
<label class="col-form-label" for="images">Image Gallery</label>
<div class="gallery-item-wrapper-0">
<input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
</div>
</div>
<div id="result"></div>
<br>
<button id="submit">submit image</button>
and in you upload-images.php
foreach($_FILES as $file){
//your code
}

jquery keypress to add class

I am trying to learn jquery keypress to add class system.
I have tryed the following code but it doesn't worked. I have tryed with an ID here. When started the #ttt1 then the the #rb1 background color should change but nothing happened.
What i am doing wrong or what i need to do here? Anyone can tell me ?
This id DEMO from codemep.io
$(document).ready(function() {
var ID = $(this).attr("id");
$("#ttt" + ID).on('keypress', function() {
if ($(this).val().length > 20) {
$("#rb" + ID).addClass("ad");
} else {
$("#rb" + ID).removeClass("ad");
}
});
});
HTML
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea>
</div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea>
</div>
<div class="br" id="rb2">Button</div>
</div>

You are defining a variable ID inside a function which occurs on $(document).ready(). Inside that function the value this will point to the document. What you need to do is to define the variable inside the keypress event handler function.
Use class for selection and then use $(this).attr("id") inside the handler function. Also you can use $(this).closest('div').next() to get the next element in the parent.
DEMO
$(document).ready(function() {
//here value for this is the document object and the id is not useful.
$(".test").on('keyup', function() {
//but here value for this is textarea where keypress event happened.
var ID = this.id;
if (this.value.length > 20) {
$(this).closest('div').next().addClass("ad");
} else {
$(this).closest('div').next().removeClass("ad");
}
});
});
.container {
margin:0px auto;
width:100%;
max-width:500px;
position:relative;
margin-top:100px;
}
.test {
outline:none;
border:1px solid red;
width:100%;
min-height:100px;
}
.br {
background-color:blue;
width:100px;
height:40px;
}
.ad {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea></div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea></div>
<div class="br" id="rb2">Button</div>
</div>

Button Effect OnClick Javascript

I need to create a button. The button must be similar to this:
And when i click to it, it must change in:
How can i do it? Thanks to all. I need i must use jquery, but i don't know how.

Same:
var value = 0;
$("#add_btn").on("click", function() {
$("#add_btn").hide();
$("#to_show").show();
value++;
$("#value").text(value);
});
$("#minus").on("click", function() {
value--;
$("#value").text(value);
});
$("#plus").on("click", function() {
value++;
$("#value").text(value);
});
#to_show {
display: none;
}
button{
background-color: red;
border: none;
width:40px;
height: 40px;
color: #fff;
font-size: 15px;
}
#value{
width: 40px;
display: inline-block;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="add_btn">Add</button>
<div id="to_show">
<button id="minus">-</button>
<div id="value"></div>
<button id="plus">+</button>
</div>

This is a working example by using Jquery and Css. Hide and Show are used to change the DOM elements.
$(document).ready(function() {
var count = 0;
$("#op").hide();
$("#btn").click(function() {
$("#result").text(count);
$("#btn").hide();
$("#op").show();
});
$("#plus").click(function() {
count++;
$("#result").text(count);
});
$("#minus").click(function() {
count--;
$("#result").text(count);
});
});
#btn, .operator{
background-color:rgb(224,0,0);
text-align:center;
cursor:pointer;
color:white;
}
#btn{
width:50px;
padding:5px;
}
.operator{
width:20px;
}
#op{
width:130px;
}
#op div{
float:left;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">click</div>
<div id="op"><div id="minus" class="operator">-</div><div id="result"></div><div id="plus" class="operator">+</div></div>

This is an example in javascript.
You might use jQuery.
CSS
.centerButton{
cursor:pointer;
text-align:center;
}
.smallButton{
width:20px;
height:20px;
}
html
<div class="centerButton" style="background:#f00;width:50px;height:25px;" id="addButton" >Add</div>
<div style="display:none" id="addButtonExpanded">
<div class="centerButton smallButton" style="float:left;background:#f00;" id="minusNumber" >-</div>
<div class="centerButton smallButton" style="float:left" id="number" >1</div>
<div class="centerButton smallButton" style="float:left;background:#f00;" id="plusNumber">+</div>
</div>
<input name="numberOfClicksInput" type="hidden" id="numberOfClicksInput"></input>
javascipt
$(document).ready(function() {
var numberOfClicks=0;
$("#addButton").click(function() {
$("#addButton").hide();
$("#addButtonExpanded").show();
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
});
$("#minusNumber").click(function() {
numberOfClicks--;
$("#numberOfClicksInput").val(numberOfClicks);
if(numberOfClicks==0){
$("#addButton").show();
$("#addButtonExpanded").hide();
} else {
$("#number").text(numberOfClicks);
}
})
$("#plusNumber").click(function() {
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
$("#number").text(numberOfClicks);
});
})
$( document ).ready(function() {
var numberOfClicks=0;
$(document).ready(function() {
$("#addButton").click(function(){
$("#addButton").hide();
$("#addButtonExpanded").show();
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
});
$("#minusNumber").click(function(){
numberOfClicks--;
$("#numberOfClicksInput").val(numberOfClicks);
if(numberOfClicks==0){
$("#addButton").show();
$("#addButtonExpanded").hide();
}else{
$("#number").text(numberOfClicks);
}
})
$("#plusNumber").click(function(){
numberOfClicks++;
$("#numberOfClicksInput").val(numberOfClicks);
$("#number").text(numberOfClicks);
})
});
})
.centerButton{
cursor:pointer;
text-align:center;
}
.smallButton{
width:20px;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<div class="centerButton" style="background:#f00;width:50px;height:25px;" id="addButton" >Add</div>
<div style="display:none" id="addButtonExpanded">
<div class="centerButton smallButton" style="float:left;background:#f00;" id="minusNumber" >-</div>
<div class="centerButton smallButton" style="float:left" id="number" >1</div>
<div class="centerButton smallButton" style="float:left;background:#f00;" id="plusNumber">+</div>
</div>
<input name="numberOfClicksInput" type="hidden" id="numberOfClicksInput"></input>

Creating boxes in javascript

I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<link rel="stylesheet" type="text/css" href="boxes.css">
<script language="JavaScript">
el=document.getElementById("box1");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.left=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box2");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.right=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box3");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.middle=width*Math.random();
el.style.top=height*Math.random();
</script>
</head>
<body>
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</body>
</html>
Here is the CSS that I have:
#box1{
background-color:orange;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box2{
background-color:blue;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box3{
background-color:green;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}

You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.
Then you need to include a unit (e.g., "px") in the left and top style properties.
Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)
Here's a working version:
var el=document.getElementById("box1");
var width=window.innerWidth-50;
var height=window.innerHeight-50;
el.style.left=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box2");
el.style.right=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box3");
el.style.middle=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
Demo: http://jsfiddle.net/m3Gg3/
Also the left and top properties in your CSS should use : not =.

It is difficult to understand what you want, maybe this?.
<script>
window.onload = function() {
var titles = ["First box", "Second box", "Third box"]
var width=window.innerWidth-50
var height=window.innerHeight-50-120
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left= (width / titles.length) * i
el.style.top=0
el.style.width = width / titles.length
el.style.height = "120px"
document.body.appendChild(el);
}
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left=0
el.style.top=(height / titles.length) * i + 120
el.style.width = "120px"
el.style.height = height / titles.length
document.body.appendChild(el);
}
}
</script>

<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#box4, #box7 {
font-family: Arial;
}
#box5, #box8 {
font-family: Courier;
}
#box6, #box9 {
font-family: Tahoma;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
function colorChange(field,group) {
switch (group) {
case 1:
document.getElementById("box2").style.backgroundColor = field.innerText;
break;
case 4:
document.getElementById("box11").style.backgroundColor = field.innerText;
break;
}
}
function fontChange(field,group) {
switch (group) {
case 2:
document.getElementById("box5").style.fontFamily = field.innerText;
break;
case 3:
document.getElementById("box8").style.fontFamily = field.innerText;
break;
}
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1" onclick="colorChange(this,1)">
Orange
</div>
<div id="box2" onclick="colorChange(this,1)">
Blue
</div>
<div id="box3" onclick="colorChange(this,1)">
Green
</div>
</div>
<div id="box_group2">
<div id="box4" onclick="fontChange(this,2)">
Arial
</div>
<div id="box5" onclick="fontChange(this,2)">
Courier
</div>
<div id="box6" onclick="fontChange(this,2)">
Tahoma
</div>
</div>
<div id="box_group3">
<div id="box7" onclick="fontChange(this,3)">
Arial
</div>
<div id="box8" onclick="fontChange(this,3)">
Courier
</div>
<div id="box9" onclick="fontChange(this,3)">
Tahoma
</div>
</div>
<div id="box_group4">
<div id="box10" onclick="colorChange(this,4)">
Orange
</div>
<div id="box11" onclick="colorChange(this,4)">
Blue
</div>
<div id="box12" onclick="colorChange(this,4)">
Green
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>

Try this using jQuery :
Here the boxes should be created dynamically and without naming the id's hardcoded it also should be done in a better way with your code. It's easier now as you are creating 4 boxes, what about 100 or more. So it's wise to always take the better way to maintain scalability of our work.
HTML :
<div id="mainDiv">
</div>
CSS :
// general css for all divs inside mainDiv
#mainDiv div{
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
float : left;
}
jQuery :
$(document).ready(function(){
// taking a color array
var colorArray = new Array("red", "green", "gray", "blue");
// loop through as many boxes you want to create
for(var i = 1; i <= colorArray.length; i++){
$("#mainDiv").append("<div id=Box" + i + "></div>");
//changing the background-color
$("#Box"+ i).css("background-color", colorArray[i-1]);
}
});
Demo
Here's Another thread explaining similar Case,
And It's Solution

Jquery image gallery enlargement

Now I have pretty difficult problem..
I found this code on the internet, and was wondering if I can make this effect:
When I click on the big image, or anywhere else where you specify, can my image somehow enlarge or pop out (in the same window) with a dim background.
I've found many scripts with which I can make that happen but somehow I can't implement it into this code.
So here is the code, copy and paste it in your program; every advice will be great:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
body {margin:0;
background:#111;
font:11px Verdana,Arial;
}
#slideshow {list-style:none;
color:#fff}
#slideshow span {display:none}
#wrapper {width:506px;
margin:50px auto;
display:none}
#wrapper * {margin:0;
padding:0}
#fullsize {position:relative;
width:500px;
height:300px;
}
#image {
width:500px;
}
#image img {position:absolute;
z-index:25;
width:auto}
.imgnav {position:absolute;
width:25%;
height:306px;
cursor:pointer;
z-index:150}
#imglink {
position:absolute;
height:306px;
width:100%;
z-index:100;
opacity:.4;
filter:alpha(opacity=40);
}
#thumbnails {margin-top:0px;
position:relative;
top:-55px;
padding:0px;
margin:0px;
}
#slidearea {
padding:0px;
margin:0px;
float:left;
position:relative;
width:500px;
height:81px;
overflow:hidden}
#slider {
position:absolute;
left:0;
height:81px;
width:460px;
}
#slideleft {
float:left;
width:20px;
height:31px;
margin-top:25px;
position:relative;
z-index:100;
background-color:#222;
top:50px;
}
#slideright {
position:relative;
z-index:100;
float:right;
width:20px;
height:31px;
top:-60px;
left:-6px;
}
#slideleft:hover {background-color:#333}
#slideright:hover {background-color:#333}
#slider img {cursor:pointer;
}
</style>
</head>
<body>
<ul id="slideshow">
<li>
<h3></h3>
<span>photos/sea-turtle.jpg</span>
<p></p>
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" >
var TINY={};
function $(i){return document.getElementById(i)}
function $$(e,p){p=p||document; return p.getElementsByTagName(e)}
TINY.slideshow=function(n){
this.infoSpeed=this.imgSpeed=this.speed=10;
this.thumbOpacity=this.navHover=70;
this.navOpacity=25;
this.scrollSpeed=5;
this.letterbox='#000';
this.n=n;
this.c=0;
this.a=[]
};
TINY.slideshow.prototype={
init:function(s,z,b,f,q){
s=$(s);
var m=$$('li',s), i=0, w=0;
this.l=m.length;
this.q=$(q);
this.f=$(z);
this.r=$(this.info);
this.o=parseInt(TINY.style.val(z,'width'));
if(this.thumbs){
var u=$(this.left), r=$(this.right);
u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');
r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
this.p=$(this.thumbs)
}
for(i;i<this.l;i++){
this.a[i]={};
var h=m[i], a=this.a[i];
a.t=$$('h3',h)[0].innerHTML;
a.d=$$('p',h)[0].innerHTML;
a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
a.p=$$('span',h)[0].innerHTML;
if(this.thumbs){
var g=$$('img',h)[0];
this.p.appendChild(g);
w+=parseInt(g.offsetWidth);
if(i!=this.l-1){
g.style.marginRight=this.spacing+'px';
w+=this.spacing
}
this.p.style.width=w+'px';
g.style.opacity=this.thumbOpacity/100;
g.style.filter='alpha(opacity='+this.thumbOpacity+')';
g.onmouseover=new Function('TINY.alpha.set(this,100,5)');
g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');
g.onclick=new Function(this.n+'.pr('+i+',1)')
}
}
this.auto?this.is(0,0):this.is(0,1)
},
mv:function(d,c){
var t=this.c+d;
this.c=t=t<0?this.l-1:t>this.l-1?0:t;
this.pr(t,c)
},
pr:function(t,c){
clearTimeout(this.lt);
if(c){
clearTimeout(this.at)
}
this.c=t;
this.is(t,c)
},
is:function(s,c){
if(this.info){
TINY.height.set(this.r,1,this.infoSpeed/2,-1)
}
var i=new Image();
i.style.opacity=0;
i.style.filter='alpha(opacity=0)';
this.i=i;
i.onload=new Function(this.n+'.le('+s+','+c+')');
i.src=this.a[s].p;
if(this.thumbs){
var a=$$('img',this.p), l=a.length, x=0;
for(x;x<l;x++){
a[x].style.borderColor=x!=s?'':this.active
}
}
},
le:function(s,c){
this.f.appendChild(this.i);
var w=this.o-parseInt(this.i.offsetWidth);
if(w>0){
var l=Math.floor(w/2);
this.i.style.borderLeft=l+'px solid '+this.letterbox;
this.i.style.borderRight=(w-l)+'px solid '+this.letterbox
}
TINY.alpha.set(this.i,100,this.imgSpeed);
var n=new Function(this.n+'.nf('+s+')');
this.lt=setTimeout(n,this.imgSpeed*100);
if(!c){
this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
}
if(this.a[s].l!=''){
this.q.onclick=new Function('window.location="'+this.a[s].l+'"');
this.q.onmouseover=new Function('this.className="'+this.link+'"');
this.q.onmouseout=new Function('this.className=""');
this.q.style.cursor='pointer'
}else{
this.q.onclick=this.q.onmouseover=null;
this.q.style.cursor='default'
}
var m=$$('img',this.f);
if(m.length>2){
this.f.removeChild(m[0])
}
},
nf:function(s){
if(this.info){
s=this.a[s];
$$('h3',this.r)[0].innerHTML=s.t;
$$('p',this.r)[0].innerHTML=s.d;
this.r.style.height='auto';
var h=parseInt(this.r.offsetHeight);
this.r.style.height=0;
TINY.height.set(this.r,h,this.infoSpeed,0)
}
}
};
TINY.scroll=function(){
return{
init:function(e,d,s){
e=typeof e=='object'?e:$(e); var p=e.style.left||TINY.style.val(e,'left'); e.style.left=p;
var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)
},
mv:function(e,l,d,s){
var c=parseInt(e.style.left); if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c); i=i<s?i:s; var n=c-i*d; e.style.left=n+'px'}
},
cl:function(e){e=typeof e=='object'?e:$(e); clearInterval(e.si)}
}
}();
TINY.height=function(){
return{
set:function(e,h,s,d){
e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||TINY.style.val(e,'height');
ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)
},
tw:function(e,h,ho,hd,s){
var oh=e.offsetHeight-ho;
if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}
}
}
}();
TINY.alpha=function(){
return{
set:function(e,a,s){
e=typeof e=='object'?e:$(e); var o=e.style.opacity||TINY.style.val(e,'opacity'),
d=a>o*100?1:-1; e.style.opacity=o; clearInterval(e.ai); e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)
},
tw:function(e,a,d,s){
var o=Math.round(e.style.opacity*100);
if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d; e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'}
}
}
}();
TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e); return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();// JavaScript Document
</script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=false;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=0;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
</body></html>

I'll copy my answer from a previous question:
The term is a lightbox. There any many jQuery lightbox plugins. I've had great experience with FancyBox.
To use them, you could target all anchor tags which have direct children img tags, for instance:
$('a:has(img)').fancybox();

Develop Reference

JavaScript is the programming language of the Web.

Jquery/Javascript changing img SRC with IF/ELSE statement - javascript

img is a jQuery object, therefore img.src will be undefined. You need to test img[0].src or img.prop('src').

Get/set src of image using img.attr("src") and not img.src Or you can make use of: img.get(0).src. img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src;

Related

how to remove single uploaded file from jQuery in multiple file upload

jquery keypress to add class

Button Effect OnClick Javascript

Creating boxes in javascript

Jquery image gallery enlargement

Categories

Resources