Make img thumbnail gallary to work in php - javascript

When I insert some php code to make this dynamic. The problem becomes that when the website refreshes there i cant get to have a image preselected. How can I make that when I refresh the site a img is from UL is preselected.
Html:
<html>
<div>
<div class="Vareside">
<div class="Venstredel">
<div class="Bildeholder">
<img src="Bilder/1.jpg" alt="">
</div>
<div class="ProduktBilder">
<ul class="p_ul">
<li class="p_li"><img src="Bilder/1.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/2.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/3.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/1.jpg" alt=""></li>
</ul>
</div>
</div>
</html>
Script:
<script>
$(document).ready(function() {
$("ul li img").click(function(){
var CurrentImageURL = $(this).attr("src");
$(".Bildeholder img").attr("src", CurrentImageURL)
});
});
</script>

Related

How to minimize function repetition using element data-attribute?

My jQuery code is working but I want to minimal it by data attribute. Please see below my HTML and jQuery code.
The functions below are repeated upto four times and I want to minimize/reduce this repetition. Thanks in advance.
$('.nav-menu-list ul li:nth-child(1)').hover(function() {
$('#item-01').fadeIn();
}, function() {
$('#item-01').fadeOut();
});
$('.nav-menu-list ul li:nth-child(2)').hover(function() {
$('#item-02').fadeIn();
}, function() {
$('#item-02').fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" /></div>
<div id="item-02"><img src="images/home-preview.png" alt="" /></div>
<div id="item-03"><img src="images/home-preview.png" alt="" /></div>
<div id="item-04"><img src="images/home-preview.png" alt="" /></div>
<div id="item-05"><img src="images/home-preview.png" alt="" /></div>
<div id="item-06"><img src="images/home-preview.png" alt="" /></div>
</span>
You can use only a single function to control all of them.
But, for this, in the jQuery selector you must use $('.nav-menu-list ul li').
With this selector, hover() context will be the li itself, then, just get the data-id of the current hovered li and then use it to select the div you want to target.
See below, I suggest to use full page ("Expand Snippet") mode on the snippet to better visualization:
$('.nav-menu-list ul li').hover(function() {
let id = "#" + $(this).data("id")
$(id).fadeIn();
}, function() {
let id = "#" + $(this).data("id")
$(id).fadeOut();
});
.nav-menu-list-details div{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" />ITEM_1</div>
<div id="item-02"><img src="images/home-preview.png" alt="" />ITEM_2</div>
<div id="item-03"><img src="images/home-preview.png" alt="" />ITEM_3</div>
<div id="item-04"><img src="images/home-preview.png" alt="" />ITEM_4</div>
<div id="item-05"><img src="images/home-preview.png" alt="" />ITEM_5</div>
<div id="item-06"><img src="images/home-preview.png" alt="" />ITEM_6</div>
</span>
You should consider that the event target is the single object, even if the target includes a multitude of items:
$('.nav-menu-list ul li').hover(function() {
var id = $(this).data().id;
$("#"+id).fadeIn();
}, function(){
var id = $(this).data().id;
$('#'+id).fadeOut();
});

How to change image and link with data values in Javascript?

I start learn Javascript and I need your help.
I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage.
And swipebox link has to change to second data-original image. The same for other images.
HTML:
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
jQuery(document).ready(function( $ ) {
$('.profile-thumbs li').click(function(){
var imageurl = $(this).children('img').data('bigimage');
var imageorig = $(this).children('img').data('original');
$('.profile-bigImage').attr("src", imageurl);
$('.swipebox').attr("href", imageorig);
});
});
$(this) is always the clicked element in a click function matching the selector.
This may do the stuff, try this:
$(".profile-thumbs li img").click(function() {
var bigImg = $(this).data("bigimage"),
original = $(this).data("original");
$(".swipebox").attr("href", original);
$(".profile-bigImage").attr("src", bigImg);
});
look at the below example using jQuery.
`$(this)` will refer the image clicked.
so $(this).attr('src') will be the source of the image which we click.
assign it to the image which is having class profile-bigImage
$('img').click(function(){
var imgsrc=$(this).attr('src');
$('.profile-bigImage').attr('src',imgsrc);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
You can try something like that, it should work
$(document).on('click','.profile-thumbs img', function(event) {
event.preventDefault();
$('.profile-gallery-top a').attr('href', $(this).data('original'));
$('.profile-gallery-top img').attr('src', $(this).data('bigimage'));
});

Using jquery, how to change div position depending on variable

I'm trying to create a simple slider
I have main images and thumbnails
I want to animate the thumbnails container to the right position, put i don't want to use integer i want to use width value from a variable
My HTML code is some thing like that
<div class="Slider" >
<ul class="main-image">
<li><img src="images/gal-1.jpg" alt=""/></li>
<li><img src="images/gal-2.jpg" alt=""/></li>
<li><img src="images/gal-3.jpg" alt=""/></li>
</ul>
<div class="thumbnails-holder">
<a class="prev"></a>
<div class="thumbnails-items">
<a class="thumbnails-item">
<img src="images/gal-1.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-2.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-3.jpg" alt=""/>
</a>
</div>
<a class="next"></a>
</div>
</div>
My J query code
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function(){
$(this).parents().find(".thumbnails-items").animate({
right: '-=95'
})
})
is there a way to write it like right: '-=ThumbWidth'
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function() {
$(this).parents().find(".thumbnails-items").animate({
right: '-=' + ThumbWidth
});
});

Change all children's image source

I have a need to change the src of all the Images found within an UL element. I do have a Jquery library so maybe that will make it easier. The HTML looks like this.
<ul id="sortable" class="ui-sortable">
<li class="ui-state-default">
<img id="aImg" alt="sortable image" src="images/a.jpg" />
</li>
<li class="ui-state-default">
<img id="bImg" alt="sortable image" src="images/b.jpg" />
</li>
<li class="ui-state-default">
<img id="cImg" alt="sortable image" src="images/c.jpg" />
</li>
</ul>
What's the quickest method I could embody to rename all image sources to the same filename with a "-backup" before the file extension?
Pass a callback to .attr():
$('ul img').attr('src', function(i, src) {
return src.replace('.', '-backup.');
});
Try this
$("#sortable li img").each(function(){
this.src = this.src.replace(".jpg", "-backup.jpg");
});
$('ul li img').each(function() {
$(this).attr('src', $(this).attr('src').replace('\.jpg', '-backup.jpg')
})

Browser compatibility code for all functions, events, etc

I used onmouseover and onmouseout for viewing image but its not working in chrome. need solution for this problem.
script is
<script>
var img;
window.onload = function () {
img = document.getElementById ("img");
}
</script>
<img style= "position:absolute;TOP:90px; LEFT:185px;visibility:hidden;"
class="two"
id="img"
src="services/web2.png"
width="800" height="500" alt=""/>
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>
<a href="target4"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">Sales & Service</a>
</li>
<li>
<a href="target5"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">CCTV</a>
</li>
<li>
<a href="target6"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">DVR</a>
</li>
</ul>
</div>
You are using very obtrusive javascript, it is simply bad practice.
So tracing the mistake don't make so much sense.
People who suggested using jQuery are very much right, and you will do yourself a favour
by taking that advice.
Using onMouseOver and other javascript directly on DOM element is just not how things are done anymore.
Separate your JavaScript
window.onload = function () {
var img = document.getElementById('img'),
links = ['target4', 'target5', 'target6'],
i = links.length, e,
over = function over(){
img.style.visibility='visible';
img.src='services/web2.png';
},
out = function out(){
img.style.visibility='hidden';
};
while( --i >= 0 ){
e = document.getElementById(links[i]);
e.addEventListener('mouseover', over, false);
e.addEventListener('mouseout', out, false);
}
}​
from your HTML
<img id="img" class="two" src="services/web2.png" alt=""/>
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>
<a id="target4" href="target4">Sales & Service</a>
</li>
<li>
<a id="target5" href="target5">CCTV</a>
</li>
<li>
<a id="target6" href="target6">DVR</a>
</li>
</ul>
</div>​
Working example fiddle.
You better use jQuery for that kind of stuff, that should work on all browsers.
http://api.jquery.com/mouseover/
try this:
css:
#img {
position:absolute;
top:90px;
left:185px;
visibility:hidden;
}
JS:
$(function(){
var $img = $('#img');
// selector container for image
var $container = $('.item');
$container.find('ul li a')
.bind('mouseover', function(event) {
var target = $(this).attr('href'); //if you need to differentiate
$img
.css('visibility', 'visible')
.attr('src', 'services/web2.png');
})
.bind('mouseout', function(event) {
var target = $(this).attr('href'); //if you need to differentiate
$img
.css('visibility', 'hidden');
})
});
HTML:
<img class="two" id="img" src="services/web2.png" width="800" height="500" alt="" />
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</div>
Use jQuery!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('li a').mouseenter(function () {
$('li a').hide(1);
}).mouseout(function () {
$('li a').show(1);
});
});
</script>
</head>
<body>
<ul>
<li><a id="link" href="http://www.tivo.com/">DVR</a></li>
</ul>
</body>
</html>

Categories

Resources