How can I have it keep the photos in their original proportions. All photos are under 640 x 480 though not all the same size. When they are viewed in the slider the are streteched to the 640 x 480 regardless of their original size.
View 2 RepliesI am hoping to use a 3rd party script for a simple JQuery photo slider for my WP blog. But the script creator says: "If you are trying to 'include' this into a blog template then you will need to have a good knowledge of the template structure and how it is pulling the information from the database. The files that I supply are intended for use in a normal xhtml page where you would just add the javascript calls and stylesheet links to the page head, then embed the xhtml into the web page or use a simple php 'include' to add this at run time." He couldn't help further. The blog theme I purchase comes with a photo slider but I wasn't happy with it 100%. I took the code from the new one and put it in as best as I could where the original one was formatted. I am not a programmer though and I know that clearly I did not do it right, as I used "a" ids like you would in HTML and I know they don't belong in PHP. However, it magically is working somewhat! All the graphics are showing, it's pulling images, and they are sliding. I just need to clean it up a bit. Here is a page where it is on:
[Code]...
I would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this:Photo / Text about Photoand have both switch after a little while, to the next photo and text.
View 5 Replies View RelatedI have a form with two slider on it so the user can select an amount. The slider works fine and passes the values to email ok etc. but when the page is loaded there is "[object Object]" in box of the second slider. I can't find the problem with the code as it is the same for the first slider.
Here is a link to the form: [url]
<script>
I got 2 sliders in a List:
<li data-role="fieldcontain">
<label for="slider_year"><big>Jahr auswählen</big></label>
<input type="range" name="slider_year" id="slider_year" value="2000" min="2000" max="2011" />
[Code]....
Both alerts wont get called...
I know this should be very easy, but i dont get it.
1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added
jQuery(".fader").hide(); so its now
<script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
[Code]...
i am using jquery slider.i need to display the values on mouseover of the slider handle
View 4 Replies View RelatedI have to change the slider color depending on its value, but I didn't manage to do it, I changed the attribute "background" of the class "ui-slider-range" this way : $("#slider.ui-slider-range").css("background","red"); Since I have three states (red, orange and green) I have to use three sliders, each one has one color, all hidden at the beginning then I show the appropriate slider when the value changes.
View 1 Replies View RelatedI've got the following problem: I have a Jquery slider and I want to disable the click on the slider. I only want to change the slider when I click and drag the pointer. Standard you can also click everywhere on the slider and the pointer will go to that point. That I don't want. .
Code HTML4Strict:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
[Code]....
I have a php code that creates a select combo box depending on some values stored in a database and I am trying to make it look nicer I found the jquery slider I found this but it does not work in the environment I am working (joomla) well, it does but it disappears as soon as I move the slider. so if I had
Code HTML4Strict:
<select id="someId" >
<option>1</option>
<option>1</option>
<option>1</option>
</select>
is there an easy way to transform that into a slider?
Here is a photo album I've made up. I made it primarily for a photo album on your harddisk/a CD, but it would probably work for the internet aswell.
View 5 Replies View RelatedI am trying to make a webpage and there is something that I want on it, however, I have no idea how to get it. I want a scrollbar that has jpegs. I want a person to be able to scroll through thumbnails (in the scrollbar) and click on it and be brought to the link.
Does anyone know of a script that I can get that will do that? I know nothing about writing scripts.
I have put on my site a photo gallery and at the right a nav menu. This
menu has a red dot visible want someone is passing over one item or
clickong one item.
I want to make two things in this page (the sameone
http://www.danieldesjardins.com/gallery/1202015) so it would be like a
want. If you can help a would appriciate. I'm a beginner i copy CSS
from exemple and put them in my page... But whent it comes to do simple
more with it ...i'm very limited.
The first thing is how can a get ride of the selection borber around
the photo a have clicked.
The second thing is : every photo is from from one itme of my nav menu
at the right. This menu as a When someboby select a picture in the
gallery, i would like to get the corresponding item menu hover a the
same time.
The third is ... i want to put the clickable mini photo under the big
photo......
I'm not sure if this is the right group to post in. If it is not,
please let me know where I should be posting.
I have been looking all over the internet for free javascript code for
a photo gallery that has the following features. Do you know where I
can find this?
1. Allows you to use different size photos
2. lets you put a few lines of text under the photo
3. Has navigation arrows (left and right)
I used the code here for my photo rotator: [URL]. It works when there's one rotator on the page, but I need to add a few and that does not work.
function theRotator() {
//Set the opacity of all images to 0
$('.photos img').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('.photos img:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 4000 = change to next image after 4 seconds
setInterval('rotate()',4000);
} function rotate() {
//Get the first image
var current = ($('.photos img.show')? $('.photos img.show') : $('.photos img:first'));
var currentButton = ($('.photos a.active')? $('.photos a.active') : $('.photos a:first'));
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.photos img:first') :current.next()) : $('.photos img:first'));
var nextButton = ((currentButton.next().length) ? ((currentButton.next().hasClass('active')) ? $('.photos a:first') :currentButton.next()) : $('.photos a:first'));
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
nextButton.addClass('active');
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
currentButton.removeClass('active');
};
$(document).ready(function() {
//Load the slideshow
theRotator();});
how can user change the photo on the same page
my code is
<body>
<img src="photo1.cgi" style="cursor:move" align="left"/></div></th><br />
<a href="photo1.cgi" >photo1.cgi</a><br />
<a href="photo2.cgi" >photo2.cgi</a><br />
[Code]....
i want to know how to make a photo effects like the one in this site http:[url].... in the downleft corner press next or previous & see the effect of fadding.
View 1 Replies View RelatedI used the below code, but it seems not correct.I want cut the around of photo, and show only the center 200*200px, how to modify?
HTML Code:
<div style="width:200px;height:200px;overflow:hidden;background-color:#000;"><img src="http://www.chlorischile.cl/alternanthera/foto6inflorescencia.jpg" width="200"
onload="this.style.backgroundPosition=(200-image.width)/2+'px';this.style.backgroundPosition=(200-image.width)/2+'px';no-repeat;" /></div>
I am currently building a simple photogallery. The photogallery contains a box with a few photo's in it, lined up horizontally. The box where the photo's are placed in is using an overflow so that there are only shown a few photo's. Below the box i have two buttons, left and right. The idea is simple if you click the left button the photo's must go 50 px to the left and visa versa goes with the right. I have coded this but the photo's unfortunately won't move! Have i done something wrong? You can see my code here:
View 2 Replies View RelatedI have a database that contains a filename and an associated caption. Switching the photos works OK, but I want the caption above the photo to change as well. I'm getting the correct data back so that's not the issue.[code]...
View 6 Replies View RelatedI have a question to you.
I have created a web page:
I am using some excellent code for a photo slide show from ..
The way this slide show gallery works is there are mulitple list items in an UL and within each list item is an image. sequentially one list item has the class .show and this changes the css of that list item so opaque is set to 1. Making it visible. A timer determines when the list items change so the next list item within the hierarchy has .show. Once is reaches the last list item, it goes back to the first item.
The problem I have with my code is that when the page first loads up, the first image displays briefly before changing to the second image. After this happens, the slide show behaves correctly.
In bold are the the important lines of code. First I use jquery to assign .class to first list item. The second line of code in bold is a conditional statement. If no image has .show, assign it to the first list item. This is when the code doesn't work as intended.code...
I've been looking for a gallery that interacts with a ligthbox and I can't seem to locate one to my needs. It either is a good gallery with a lame lightbox implementation or vice-versa. very spiffy prototypish gallery carousal type with a lightbox implementation?
View 6 Replies View RelatedI am unable to find a JavaScript picture viewer that does what I would like it to do.I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail.
View 1 Replies View RelatedI recently asked here about flash software for creating a gallery for my photoblog, but I now relaise I want something that's probably far more straight forward (I hope).What I want is for the first image in a set to load when the user clicks a category link (say Landscapes, for instance). Somewhere alongside the image will be a list of numbers or titles which, when hovered over with the mouse cursor, will change the image to the next in the set. Here's an example of exactly what I want:
[URL]
Hover over 'photographs >> homes at night >> houses' to get to one of the galleries.
I've taking two existing bits of javascript and tried to put them together. What I would like is when you click on a "Thumbnail" the Image displays full size and has corresponding "Caption" text show up in a text box below. Code:
View 4 Replies View Related