Develop Reference

Replace the main image with thumbnails in Javascript

Here my script :
function changeImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG"){
document.getElementByClass("img-big-wrap").src = targetElement.getAttribute("src");
document.getElementById("mainimageLink").href = 'link'+targetElement.getAttribute("data-link")+'.html';
}
}
Inspired of this Answer : Javascript Gallery - Main Image href change
My HTML :
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="<?php echo $data[0][gallery][0][photo];?>">
<img class="img-big-wrap" src="<?php echo $data[0][gallery][0][photo];?>" alt="">
</div>
<div class="img-small-wrap" onclick="changeImage(event)">
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][1][thumb];?>" data-link="1"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][2][thumb];?>" data-link="2"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][3][thumb];?>" data-link="3"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][4][thumb];?>" data-link="4"> </div>
</div>
</div>
The code is actualy just open me the link of the main image only
I want to change the main image with the thumbnails when I click On, I dont know if what i'm doing is the good solution

Working Plunk: http://plnkr.co/edit/pjpHBUD4yPihqr7lJKAD?p=preview
<div class="gallery-wrap">
<div>
<a id="mainimagelink" href="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg">
<img class="img-big-wrap" src="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg?>" alt="">
</a>
<hr/>
</div>
<div class="img-small-wrap" ">
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://s5.favim.com/610/52/Favim.com-winter-nature-small-canon-eos-7d-474348.jpg " data-link="1 "> </div>
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfAMUZQLGObfUBSLgnPj5b5C7Ww2DNMtKbwkuTbglK-p1La17BnA " data-link="2 "> </div>
</div>
</div>
A couple of things you've missed.
The HTML DOM was not well constructed. The tag with id mainimagelink was left unclosed, leading to opening of the main image everytime you clicked on any image.
Not sure of your use case but I believe you were trying to create a thumbnail gallery with a preview. Added Image URLs and CSS to simulate the API response.
'img-big-wrap' class was used for the image container and the actual Image itself, which would lead to errors when you try to locate your element with js.
document.getElementByClass is not the right name for the method. I believe you were going for 'document.getElementsByClassName' which returns an array as multiple elements can have the same className.
Refer to querySelector (most useful of them all):
https://www.w3schools.com/jsref/met_document_queryselector.asp
All the best!

First of all, you have used the same class more than once and tried to access it img-big-wrap.
There is also no accessor called getElementByClass instead use
getElementsByClassName which is an array since you can have multiple divs with the same class.
Typo here "mainimageLink" which you called your div with id="mainimagelink", case matters.
I have moved onclick into JS using addEventListener which saves me passing parameters from the div.
Add an id into your thumbnail parent div myImgDiv and used it to hook an Event Listener to it.
Here is what the code looks like (Not many changes were made):
let smallImgDiv = document.getElementById('myImgDiv');
smallImgDiv.addEventListener('click', (e) => {
let targetElement = e.target || e.srcElement;
let tagName = targetElement.tagName;
if(tagName === "IMG") {
document.getElementById('bigImage').src = targetElement.getAttribute("src");
document.getElementById("mainimagelink").href = 'link' + targetElement.getAttribute("data-link") + '.html';
}
});
.img-small-wrap img{
width: 150px;
height: 150px;
}
.img-big-wrap {
height: 200px;
}
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="#">
<img id="bigImage" class="img-big-wrap" src="http://via.placeholder.com/300.png" alt="">
</a>
</div>
<div id="myImgDiv" class="img-small-wrap">
<div class="item-gallery"> <img src="https://getuikit.com/v2/docs/images/placeholder_200x100.svg" data-link="1"> </div>
<div class="item-gallery"> <img src="https://cdn.dribbble.com/users/312581/screenshots/1676038/female-placeholder_1x.png" data-link="2"> </div>
<div class="item-gallery"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1134418-200.png" data-link="3"> </div>
<div class="item-gallery"> <img src="https://source.sierrawireless.com/~/media/developer%20zone/icons/sw_dz_icons_placeholder.ashx?h=240&la=en&w=240" data-link="4"> </div>
</div>

Webpage loading images from MySQL slowly

I am building a webpage where i am displaying about 10 photos in a slider.The photos are being fetched from a folder where it is uploaded,the code is given below.
<div class="main">
<div class="main_slider">
<div id="bg"> <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" /> </div>
<div id="preloader"> <img src="images/ajax-loader_dark.gif" width="32" height="32" /> </div>
<!--<div id="img_title"></div>-->
<div id="toolbar"> <img src="images/toolbar_fs_icon.png" width="50" height="50" /> </div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php
include("connect.php");
$s=mysql_query("Select image from gallery where active_home=1 ") or die(mysql_error());
while($row=mysql_fetch_array($s))
{
$img=$row["image"];
//$image= "<img src=\"images/gallery/$img\" width=200 height=120>";
echo "<div class=content_img>";
echo "<div> <img src=\"images/gallery/$img\" height=138 width=238 alt=image class=thumb style=opacity:0.6;/> </div>";
echo " </div> ";
}
?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
The page is loading very slow in the server and browser crashing frequently.I have tried reducing the image size but nothing improves.

You can clean up your code like this:
// Main PHP part
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
// Main HTML part
?>
<div class="main">
<div class="main_slider">
<div id="bg">
<img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" />
</div>
<div id="preloader">
<img src="images/ajax-loader_dark.gif" width="32" height="32" />
</div>
<div id="toolbar">
<a href="#" title="Maximize" onClick="ImageViewMode('full');return false">
<img src="images/toolbar_fs_icon.png" width="50" height="50" /></a>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php foreach ($images as $image) { ?>
<div class="content_img">
<div>
<a href="images/gallery/<?= $image; ?>">
<img src="images/gallery/<?= $image; ?>" height="138" width="238" alt="image" class="thumb" style="opacity:0.6;" />
</a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
In that way, you have properly separated the HTML from the PHP. Now, all bugs should be more obvious and easier. You can add checks at the end of the PHP, you can forget about needing to escape the " with \" manually and your code is more focused and clean. Note that I've changed the code from mysql_ to PDO, so now it shouldn't really work (you need to create the $DB = new PDO(), normally in connect.php.
Even more, now you can test where the problem is by doing something like this:
$start = microtime(true);
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
echo "Load time: " . (microtime(true) - $start) . "<br>";
In that way you know if it's your PHP or your HTML (check it with the browser's network profiler) what takes ages to load.

Try
Jpeg images instead of png
Save images with option "Save image for web"
You can use RIOT image optimisation tool
For reducing load time you can use CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often used for mouse-over states on buttons. E.g. with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over the image.
Do not use an Image at all. we can generate rounded rectangles, gradients, drop shadows, and transparent images using CSS

I think you should try to store images on disk and check if images load faster from hard drive .

Wordpress post slider

So what I want to do is have a wordpress content area that will display the next post when a link is clicked. I have this as my post query
<?php
$args = array();
$lastposts = get_posts( $args );
foreach ( $lastposts as $post )
{
setup_postdata( $post );
$posts[] += $post->ID;
}
$current = array_search(get_the_ID(), $posts);
$prevID = $posts[$current-1];
$nextID = $posts[$current+1];
?>
Then I have this as the pagination links
<?php if (!empty($prevID)) { ?>
<li class="previous">
<a class="panel" href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>">← Older</a>
</li>
<?php }
if (!empty($nextID)) { ?>
<li class="next">
<a class="panel" href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>">Newer →</a>
</li>
<?php } ?>
I can't figure out how to tell the guts of a post (the_permalink, the_content) to display the next post. My goal is to add some sort of transition but that is not as important as having the next post show up. Any ideas, is it even possible?

I have always hated Carousels and sliders but this particular slider has always been my go to as it's super easy and very customizable.
jcarousellite is the name of it and it majestic. Heres is the website http://www.gmarwaha.com/jquery/jcarousellite/
If you have a basic understanding of css you will love this but heres an example mockup.
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js"></script>
</head>
<body>
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
</body>
In this I would host at least the jcarousellite.js file on your server as theres a bunch of settings in there to play around with like showing 1 image at a time, but I hope this helps you! Don't forget you can add id's to the buttons to make them look nice and wrap everything in css to make it look sexy.

replace the li's in the middle with this
<?php
$thumbnails = get_posts('numberposts=5');
foreach ($thumbnails as $thumbnail) {
if ( has_post_thumbnail($thumbnail->ID)) {
echo '<li><a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo get_the_post_thumbnail($thumbnail->ID, 'medium');
echo '</a></li>';
}
}
?>

Replace image src and a href onclick

I've got this little project where I want to swap an image for another, and display the new image in a lightbox.
The code below works as follows; when I click one of the small images, the image src of the large image is replaced with the src of the small image. However, when I click the large image, it still opens the default large image in my lightbox.
Is there any way I can make the hyperlink href get swapped the same way the image src is swapped? They need to get the same value.
The javascript:
<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}
function switchImg(i){
document.images["main-image"].src = i;
}
</script>
The HTML/PHP:
<?php
$image = 'main-image.jpg';
$small_1 = 'small-image-1.jpg';
$small_2 = 'small-image-2.jpg';
?>
<div id="holder">
<div class="large">
<a href="<?php echo $image; ?>" rel="lightbox">
<img id="main-image" src="<?php echo $image; ?>" />
</a>
<a class="original" onclick="switchImg('<?php echo $image; ?>')">Back to original image</a>
</div>
<div class="small">
<a onclick="switchImg('<?php echo $small_1; ?>')">
<img src="<?php echo $small_1; ?>" />
</a>
<a onclick="switchImg('<?php echo $small_2; ?>')">
<img src="<?php echo $small_2; ?>" />
</a>
</div>
</div>

to change the href:
document.getElementById('YOUR_ID').href = 'abraCaDabraDotCom';

Lightbox showing only the 1st of the pictures

I have a main image which is loaded each time with a different image if you rollover the thumbnail. There are 3 thumbnails.
There is also a lightbox effect and here is where my issue happens. Every time I click on the main image, no matter which of the thumbs has been loaded to the main image, image 1 is the one shown in the lightbox.
I clearly see where the issue is, but I am just wondering how I could make it so the image loaded in the mainImage container is the one shown in the lightbox.
Here is my code, maybe it explains better.
Thanks!
<div id="thumbs">
<img class="thumbSelected" src="images/<?php echo $row[thumb1]; ?>.jpg" /><br />
<img src="images/<?php echo $row[thumb2]; ?>.jpg" /><br />
<img src="images/<?php echo $row[thumb3]; ?>.jpg" />
</div>
<div class="mainImage">
<a href="images/<?php echo $row[image1]; ?>.jpg" rel="lightbox" title="<?php echo $row[name]; ?>">
<img class="mainImage" src="images/<?php echo $row[image1]; ?>.jpg" />
</a>
</div>
<script> ////large: ITEM1_01_large small: ITEM1_01_thumb
//
$('#thumbs').delegate('img', {
mouseover: function(){
$('.mainImage').attr('src',$(this).attr('src').replace('thumb','image'));
var $this = $(this),
index = $this.index();
$("#thumbs img").removeClass('thumbSelected');
$this.addClass('thumbSelected');
$("#big-image img").eq(index).show().siblings().hide();
}});
</script>

I can't really see what you are doing. However, if jQuery finds the first element and stop if you are using id selector. If you want to select multiple elements, you need to use class. That's what class is for.