I've seen several posts around this issue but nothing that seems like a definitive resolution.Cycle defaults to positioning the slides at top:0 and left:0 within the container div. I want them to be bottom:0 and left:0 within the container div.
[Code]...
I am creating a single column fluid layout and have run into an issue when positioning the images I display via Mike Alsup's cycle plugin. I dynamically load a "content" DIV with three other DIVs, one of which is controlled by the cycle plugin. The other two DIVs are positioned as expected, however the DIV that cycle is handling has positioning CSS added to it inline that is pulling it out of my page flow. (When I disable the cycle code the single image I load first displays as expected.) Here is the code from that particular DIV:
[Code]...
I have been using the JQuery Cycle plugin on my website and love it! It has so many options and seems customizable to do basically anything. My question is about the previous and next buttons. At the moment I am using next:'#next2, .pics img', prev:'#prev2', to make previous and next arrows underneath the image as well as use the image itself a "next" button. I would like to remove the arrows underneath the image and just use left and right halves of the image as a previous and next button. Previous being the left half and next being the right half of course. I've been searching for this being posted before and have not found any discussions on it. Also, the JQuery Slideviewer does what I'm trying to accomplish: JQuery Slideviewer Demo
if(zeroLeft >= pictWidth/2) { var uiprev = ui.parent().prev().find("a"); (jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click"); } else { var uinext = ui.parent().next().find("a"); (jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click"); }
Is there a way to incorporate this type of button in JQuery Cycle? It seems easy enough to make the image a next button I feel like dividing it between the two shouldn't be that much more difficult.
I'm busy creating a website and I've implemented a gallery of sorts using this script below to make it move the images, however when it gets to the end of the cycle of images it reads the last image as the last one to reach the left hand side which is obviously quite unattractive. So all I would like to know is if there is someone who can alter this code to make it so the last image is read on the right of the block thus resulting in no blank blocks. You can view it in action at http://mcphotography.co.za/corporate.html.
Code:
var Spry;
if (!Spry) Spry = {};
[code]....
I tried to use Cycle Plugin, and it works great. I have the "Previous and Next" navigation work without any problem.
This is the code I have:
I'm looking for a jQuery plugin, which could create a flyout of a container from left or right side of a page on some event (onClick or onMouseOver).
The example can be found at [URL] when the page loads some shopping ads slide from the left side of the browser screen (it's shown automatically only once, to see it again you need to delete this website cookies and reload the page - it would be great if the plugin had this cookie-based feature).
Is there a way of making a cycle slide scroll when either left or right are pressed? I've tried searching here and there and the only thing I've come across that seemed to word was [URL]. If you'll be so kind to check that page, you'll see that the script requires a link with a class to "find" where it is, that in my cycle would be .activeSlide (I think) but it does not work. As you may have guessed, im really not in my turf with js but i think the problem is that the a.activeslide is applied by cycle to the html after the keyboard script searches for it. Is there an easy way to allow keyboard navigation? I only need left and right.
[Code]...
Here it is working [URL]
I'm trying to get a next/previous arrow to float over the right/left edges of a slideshow div. I'm using to absolutely positioned divs to contain the next/previous buttons but for whatever reason they refuse to display above the slideshow div. Is there any way to get controllers to float over the cycle container?
Here's my code and if you give it a try you won't see the floating next/previous buttons unless you change the 'top' values for #next_btn and #prev_btn in the CSS to be greater than the height of the image (change to 410 to see them in my example):
<style>
#container {width: 500px;}
#container {position: relative;}
#next_btn {position:absolute; top:10px; right:5px;}
[Code]....
How can I change direction in ScrollVert to (bottom to top) and in scrollHorz to (left to right).
View 1 Replies View Relatedi am working with a simple jQuery tabbed container and am wondering how to make the main body of the container use a background image instead of a background color. Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[code].....
But that obvioously does not work. what do I need to do to put a background image in there?
P.S. this code works other than that so you can throw it in a notepad doc to see the page in action.
I'm trying to bend my mind to insert a <div class="image_container"/> before the text in an list element
<li>text1</li>
<li>text2</li>
<li>text3</li>
should become:
<li><div class="image_container"></div>text1</li>
<li><div class="image_container"></div>text2</li>
<li><div class="image_container"></div>text3</li>
$('li', this).before('<div class="image_container"></div>')
makes<div class="image_container"></div><li>text1</li>
I tried other things, but I think I'm overlooking an obvious command.
I'm a bit new to jQuery but am loving it so far.. especially the cycle plugin. I have a strange problem that I've not been able to find the solution to anywhere else. Everything works just fine with the exception of one issue thats causing me problem. I'm using cycle to control 3 different fading animations on my page. On 2 of the animations I'd like to pause cycle after the image fades out for a few seconds but before cycle fades the next image in. The catch is that I want the timing to be different for each pause before the next cycle begins.
The goal is for#hpcontent,#hphead,#hpfade3to fade out all at the same time. Then for#hphead to pause for 2 seconds before it fades in the next random image, and#hpfade3to pause for 3 seconds before it fades in the next random image
[Code]...
I am preloading some images, so prior to the downloading I have:
In Mozilla: initially WxH = 0x0 ... after img downloaded WxH = good# x good# the div just stretches just the right amount to fit snuggly around the newly loaded image;
But the other browsers do different things;
My current solution, which works, uses a new Image().width approach where I manually resize the container div;
How to get the other browsers to automatically resize the container divs;
I would like to know if it's possible to have the button of the date picker on the left instead of the right ?
$(function() {
$("#what").datepicker({
showOn: 'button',
c: '../img/calendar.gif',
[Code].....
I have yet to be able to do this successfully. I am using the Cycle Plugin to cycle through a series of images and corresponding caption. To show the images, I use:
<div id="cycle-container">
<?php query_posts("cat=38&showposts=2"); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="http://www.website.com/uploads/<?php echo get_post_meta($post->ID, 'Image', true); ?>" alt="Icon [Code]...
Problem: The captions do not effectively cycle. What appears is the first caption from php the_excerpt but it does not change to the next php the_excerpt text. Can I solve this problem so I get the text from php the_excerpt to correspond to each image??
I have some moving objects & they are using the top left spot of the object to 'hold' or 'pivot' off. how i make the 'pivot' point in the centre of the image. I think it is somewhere in this section of code:
[Code]...
I am using Lightbox 2.04. I would like to change the size of the image container for the large image. No matter what size I actually make the image, when it appears it always fills the containing box and is too big. It is portrait orientation and sometime the image needs vertical scrolling to see it all.
How do I change the size of the image container so it fits nicely within the screen and where do I find the code to do this? I want the container to be the size of the image. Does this happen automatically based on the actual size of the image? If so, mine doesn't do that.
I wish to display some text dynamically below a series of images. I need to get the position of each image, and so I require some way of getting the position of an image in relation to the div holding the images.
I managed to get the position of the image in relation to the entire page, but this was no good for my purposes.
The *small, medium fullsize* text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.
Code [URL] Line 154:
Code JavaScript:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');
[code]...
From what I can tell the `container.width(imageWidth);` is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.
What I am trying to do is randomize the position of a div that slides in from the left when you hover over an image.
Here is the script I am working with courtesy of Build Internet
Here is the css that goes with it
I would like to randomize the value of the top position in the css and the value of right:'30%' with values in a preset range.
is there any feature to slide the images in accordion form left to right and right to left with minimum time frame(delay)?
View 1 Replies View RelatedIm trying to build on a script that I found on the internet and modified to my needs.urrently there are three images on the left, which, when clicked, change the image on the right depending on which of the left images was clicked.Simply, when you click the whisky link on the left you see a bottle of wiskey on the right. Here is my script:
Code:
<SCRIPT TYPE="text/javascript">
function switchImg(i){
[code]....
at [URL] I am using jquery cycle in 5 divs. As you will see, in 4 of them it works perfectly, but in the main image it is only showing every second slide and fading to blank on the others.
Yes, all the images are there.
The weird thing is that I essentially copied and pasted this code for the lower areas and they worked perfectly straight off.
I have a nested cycle on the portfolio section of my site. The outer cycle rotates through projects. The inner cycles rotates through screen shots of that project. I have a half dozen or so projects with several screen shots, each one has a different height.
I am using the callback to run a tallestImg function which seems to randomly work. Do you see any issues here:
// Cycle Work section
$('#portfolio').cycle({
pager: '#port_nav',
after: tallestImg,
[Code]....
I have two separate questions. One being, how would I go about having the container resizing itself for different image sizes. So that surrounding elements can conform to it's size?
Also, is there a way to align the images in a slide shows so that it is always horizontally and vertically centered in the slideshow?
Am currently trying to achieve a image cycle with a pager. I have achieved this so far but will try and list what I would like to aim for below:-- I have four images which rotate using cycle- I have pager 1-4 generated- I want each pagination to have a unique image that defines it as a button- Active background triggers a image change on the pager (this image just highlights which image is showing)I hope that helps explain what I have so far - if not ill try and answer your questions as best I can.This is also what I've pulled together so far
$(document).ready(function(){
$('#bg_container')
.after('<div id="buttons">')
[code]....